ReactNative自定義組件Button及點擊事件

首先有兩個js文件:Button.js,index.js

先在index.android.js頁面里面加入初始調(diào)用的頁面-index.js

index.android.js截圖

現(xiàn)在我們來寫B(tài)utton.js,也就是自定義組件。
先看下Button.js的render()

Button.js的render截圖

Button.js的style截圖

① const里面的‘beijingyanse’,是在引用層調(diào)用這個自定義組件的時候給的一個style,而這個‘beijinyanse’就是接收調(diào)用者發(fā)出的style的屬性,接收方法:style={backgoundColor:beijinyanse}
② const里面的text就是從接收引用層發(fā)過來的text,文字提示,如:確定、取消
③ 接下來我們給button組件添加一個點擊事件:onPress={this.onPress}

Button.js的點擊事件截圖

④ onPress()是點擊事件,enable是異步請求時改變按鈕的背景顏色,disable是請求成功之后按鈕顏色變回來。調(diào)用style={[this.state.disable&& styles.clickButton]}

我們來看index.js如何調(diào)用button組件的:
先引入Button.js ‘ importButtonfrom'../component/Button' ’
再一起來看看index.js的render()

index.js的render截圖

①看到Button里面的text、beijinyanse、obj了吧,就是在這里面任意定義參數(shù),都能通過this.props拿到,具體this.props是什么,請大家翻閱ReactNative官網(wǎng)或者中文網(wǎng),文章末會給出地址。

index.js事件調(diào)用截圖

②clickButton是點擊取消按鈕調(diào)用,我給了一個timer來測試,timer過了三秒之后,取消按鈕就恢復原來的背景顏色,我們記得要在componentWillUnmount()里清空一下timer,至于componentWillUnmount()是什么意思大家可以去了解一下RN的生命周期,這里就不詳說了。

運行結果

點擊取消按鈕之后
請求成功之后恢復原來背景顏色

代碼截圖

button.js
index.js

ReactNative:https://facebook.github.io/react-native/docs/getting-started.html
ReactNative中文網(wǎng):http://reactnative.cn/docs/0.48/getting-started.html
程序媛都覺得很簡單....喜歡就給我個喜歡唄︿( ̄︶ ̄)︿

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,813評論 25 708
  • 不管是Android還是ios,Button控件都在這兩個原生開發(fā)中都已經(jīng)被封裝好了,我們可以直接使用。但是在RN...
    BlainPeng閱讀 6,239評論 2 4
  • 公司打算用react-native開發(fā)APP,初始RN遇到了很多坑,搭建了一個小的項目框架,結合redux根據(jù)公司...
    45b645c5912e閱讀 736評論 0 5
  • 2017-11-28 1. 感恩女兒的邀請,把長長的頭發(fā)剪短了,好喜歡現(xiàn)在的發(fā)型。謝謝寶貝讓我有這樣的體驗! 2....
    感恩奇跡閱讀 270評論 0 0
  • 等滴滴等得公交都來了是一種怎樣的體驗,看到地圖上車子在距離不遠的地方一直轉圈就想爆粗口。 上一輛公交大概是...
    北敏有丂閱讀 146評論 0 0