哈哈的~~~今天介绍的是自定义组件 然后去使用这个组件，让这个组件传递这各种文件之间 哈哈 下面开始吧！！！！
我们所要创建的是一个自定义的Button，先创建一个js文件起名为MyButton,且触摸后的底色、触发事件响应的函数、
图片资源、以及图片大小都是根据传过来的值确定的。（所传递进来的参数决定）
ok！！下面我们需要在MyButton.js 这个文件中添加一些原生的控件（组件）
|
1
2
3
4
5
6
|
import
React,{
AppRegistry,
Component,
Image,
TouchableHighlight,
} from
'react-native'
;
|
然后就开始创建我们这个按钮组件啦！！！一般情况下我们会用一个叫TouchableHighlight的这个组件去包裹里面的内容
class
MyButton
extends
Component {
render() {
return
(
<TouchableHighlight
underlayColor={
this
.props.bgColor}
activeOpacity={0.5}
onPress={
.props.onPress}
>
<Image
source={require(
'./res/himi.png'
)}
style={ {
width:
.props.imgWidth,
height:
.props.imgHeight
}}
/>
</TouchableHighlight>
)
}
}
|
其中：我们应该注意这个东东~this.props 妹的~~这是什么鬼？？？
其实，这不是鬼~通俗的来说这个就是实例化的对象 比如说我创建了一个对象叫‘鬼’，那么鬼=this.props,所以鬼身上的属性也就是this.props的属性 （方法+属性）
那么，我这个this.props.xxx等属性就等待着实例化的“鬼来传递”，然后去操作其他的内容。。。。么么哒！！！
当然：
需要注意的：this.props.children 的值有三种可能：
a.如果当前组件没有子节点，它就是 undefined ;
b.如果有一个子节点，数据类型是 object ；
c.如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。
ok！组件创建好了以后~~我们就可以去将创建好的组件变形为一个能够传出去的组件
module.exports = MyButton;
|
ok！！上面的代码表示你这个组件可以被传出去了！~~~
注释：可以将许多的组件集中在一个组件上 然后传递出出来
大结局 ：
下面我们就可以大胆的使用这个组件了，比如我们在另一个文件中使用这个组件：
<MyButton
bgColor=
'#000'
onPress ={()=>{Alert.alert(
'Himi'
,
' MyBtton IS Click! '
);}}
imgWidth={100}
imgHeight={100}
>
</MyButton>
|
可以看出~这里将许多的属性参数全部传给了this.props，然后去执行一些操作！！！！！
原文链接：https://www.f2er.com/react/305781.html