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

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

先在index.android.js頁面里面加入初始調用的頁面-index.js

index.android.js截圖

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

Button.js的render截圖

Button.js的style截圖

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

Button.js的點擊事件截圖

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

我們來看index.js如何調用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事件調用截圖

②clickButton是點擊取消按鈕調用,我給了一個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
程序媛都覺得很簡單....喜歡就給我個喜歡唄︿( ̄︶ ̄)︿

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末惕艳,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子分蓖,更是在濱河造成了極大的恐慌尔艇,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,454評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件么鹤,死亡現(xiàn)場離奇詭異终娃,居然都是意外死亡,警方通過查閱死者的電腦和手機蒸甜,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,553評論 3 385
  • 文/潘曉璐 我一進店門棠耕,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人柠新,你說我怎么就攤上這事窍荧。” “怎么了恨憎?”我有些...
    開封第一講書人閱讀 157,921評論 0 348
  • 文/不壞的土叔 我叫張陵蕊退,是天一觀的道長。 經(jīng)常有香客問我憔恳,道長瓤荔,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,648評論 1 284
  • 正文 為了忘掉前任钥组,我火速辦了婚禮输硝,結果婚禮上,老公的妹妹穿的比我還像新娘程梦。我一直安慰自己点把,他們只是感情好,可當我...
    茶點故事閱讀 65,770評論 6 386
  • 文/花漫 我一把揭開白布屿附。 她就那樣靜靜地躺著郎逃,像睡著了一般。 火紅的嫁衣襯著肌膚如雪拿撩。 梳的紋絲不亂的頭發(fā)上衣厘,一...
    開封第一講書人閱讀 49,950評論 1 291
  • 那天,我揣著相機與錄音压恒,去河邊找鬼影暴。 笑死,一個胖子當著我的面吹牛探赫,可吹牛的內容都是我干的型宙。 我是一名探鬼主播,決...
    沈念sama閱讀 39,090評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼伦吠,長吁一口氣:“原來是場噩夢啊……” “哼妆兑!你這毒婦竟也來了?” 一聲冷哼從身側響起毛仪,我...
    開封第一講書人閱讀 37,817評論 0 268
  • 序言:老撾萬榮一對情侶失蹤搁嗓,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后箱靴,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體腺逛,經(jīng)...
    沈念sama閱讀 44,275評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,592評論 2 327
  • 正文 我和宋清朗相戀三年衡怀,在試婚紗的時候發(fā)現(xiàn)自己被綠了棍矛。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,724評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡抛杨,死狀恐怖够委,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情怖现,我是刑警寧澤茁帽,帶...
    沈念sama閱讀 34,409評論 4 333
  • 正文 年R本政府宣布,位于F島的核電站屈嗤,受9級特大地震影響潘拨,放射性物質發(fā)生泄漏。R本人自食惡果不足惜恢共,卻給世界環(huán)境...
    茶點故事閱讀 40,052評論 3 316
  • 文/蒙蒙 一战秋、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧讨韭,春花似錦脂信、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至濒生,卻和暖如春埋泵,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評論 1 266
  • 我被黑心中介騙來泰國打工丽声, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留礁蔗,地道東北人。 一個月前我還...
    沈念sama閱讀 46,503評論 2 361
  • 正文 我出身青樓雁社,卻偏偏與公主長得像浴井,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子霉撵,可洞房花燭夜當晚...
    茶點故事閱讀 43,627評論 2 350

推薦閱讀更多精彩內容

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