ReactNative自定义组件Button及点击事件

首先有两个js文件:Button.js，index.js

一

先在index.android.js页面里面加入初始调用的页面-index.js

index.android.js截图

二

现在我们来写Button.js,也就是自定义组件。
先看下Button.js的render()

Button.js的render截图 Button.js的style截图

① const里面的‘beijingyanse’，是在引用层调用这个自定义组件的时候给的一个style，而这个‘beijinyanse’就是接收调用者发出的style的属性,接收方法：style={backgoundColor:beijinyanse}
② const里面的text就是从接收引用层发过来的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了吧，就是在这里面任意定义参数,都能通过this.props拿到,具体this.props是什么，请大家翻阅ReactNative官网或者中文网,文章末会给出地址。

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中文网：http://reactnative.cn/docs/0.48/getting-started.html
程序媛都觉得很简单....喜欢就给我个喜欢呗︿(￣︶￣)︿