在上一篇 【REACT NATIVE 系列教程之一】触摸事件的两种形式与四种TOUCHABLE组件详解 中的最后介绍了如何使用Touchable的四种组件进行监听触摸事件。
那么紧接着我们利用Touchable来包装一个带图片的Button组件，且设计成可接受很多自定义参数。
一：创建我们自定义的Button，先创建一个js文件起名为MyButton, 且触摸后的底色、触发事件响应的函数、图片资源、以及图片大小都是根据传过来的值确定的。
1.首先我们开始引入必要的一些组件
1 2 3 4 5 6 |
import React, { AppRegistry, Component, Image, TouchableHighlight, } from 'react-native'; |
2. 创建我们的MyButton组件，继承 Component。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
class MyButton extends Component { render() { return ( <TouchableHighlight underlayColor={this.props.bgColor} activeOpacity={0.5} onPress={this.props.onPress} >
<Image source={require('./res/himi.png')} style={ { width: this.props.imgWidth, height: this.props.imgHeight }} /> </TouchableHighlight> ) } } |
这里需要注意的就一个 this.props:
在React中，组件的属性可以在组件类的 this.props 对象上获取。也就是说我们可以通过this.props对象上得到创建时传过来的属性。（注意属性名字要保持一致，才能正确获取到）
需要注意的：this.props.children 的值有三种可能：
a.如果当前组件没有子节点，它就是 undefined ;
b.如果有一个子节点，数据类型是 object ；
c.如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。
3. 将我们写好的组件导入module中。
1 |
module.exports = MyButton; |
二：使用自定义的MyButton
1. 导入我们的MyButton组件：
1 |
import MyButton from './MyButton' |
import X from ‘Y‘
X: 任意名字，用来代表我们导入的组件在此的临时组件名（可以与原组件名一致）
Y: 组件所在的相对路径
2. 在Render中使用：
1 2 3 4 5 6 7 |
<MyButton bgColor='#000' onPress ={()=>{Alert.alert('Himi', ' MyBtton IS Click! ');}} imgWidth={100} imgHeight={100} > </MyButton> |
bgColor: 传给MyButton的按下后的底色
onPress: 传给MyButton的触发函数（这里Himi偷懒用了lambda表达式）
imgWidth:传给MyButton中所用图片的宽
imgHeight:传给MyButton中所用图片的高
运行效果如下：（点击查看动态图）
