首先有兩個js文件:Button.js久锥,index.js
一
先在index.android.js頁面里面加入初始調用的頁面-index.js
二
現(xiàn)在我們來寫B(tài)utton.js,也就是自定義組件藤巢。
先看下Button.js的render()
① const里面的‘beijingyanse’庐椒,是在引用層調用這個自定義組件的時候給的一個style,而這個‘beijinyanse’就是接收調用者發(fā)出的style的屬性,接收方法:style={backgoundColor:beijinyanse}
② const里面的text就是從接收引用層發(fā)過來的text,文字提示,如:確定惜辑、取消
③ 接下來我們給button組件添加一個點擊事件:onPress={this.onPress}
④ onPress()是點擊事件蜂桶,enable是異步請求時改變按鈕的背景顏色嗡综,disable是請求成功之后按鈕顏色變回來簇捍。調用style={[this.state.disable&& styles.clickButton]}
三
我們來看index.js如何調用button組件的:
先引入Button.js ‘ importButtonfrom'../component/Button' ’
再一起來看看index.js的render()
①看到Button里面的text只壳、beijinyanse、obj了吧暑塑,就是在這里面任意定義參數(shù),都能通過this.props拿到,具體this.props是什么吼句,請大家翻閱ReactNative官網(wǎng)或者中文網(wǎng),文章末會給出地址。
②clickButton是點擊取消按鈕調用,我給了一個timer來測試,timer過了三秒之后,取消按鈕就恢復原來的背景顏色,我們記得要在componentWillUnmount()里清空一下timer,至于componentWillUnmount()是什么意思大家可以去了解一下RN的生命周期,這里就不詳說了事格。
運行結果
代碼截圖
ReactNative:https://facebook.github.io/react-native/docs/getting-started.html
ReactNative中文網(wǎng):http://reactnative.cn/docs/0.48/getting-started.html
程序媛都覺得很簡單....喜歡就給我個喜歡唄︿( ̄︶ ̄)︿