React Native 之 定义的组件 (跨文件使用)

哈哈的~~~今天介绍的是自定义组件 然后去使用这个组件,让这个组件传递这各种文件之间  哈哈  下面开始吧!!!!

我们所要创建的是一个自定义的Button,先创建一个js文件起名为MyButton, 且触摸后的底色、触发事件响应的函数、

图片资源、以及图片大小都是根据传过来的值确定的。(所传递进来的参数决定)

ok!!下面我们需要在MyButton.js 这个文件中添加一些原生的控件(组件)

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={this.props.onPress}
> <Image
source={require('./res/himi.png')}
style={ {
width: this.props.imgWidth,
height: this.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,然后去执行一些操作!!!!!

注意:属性的名称一定要一样~要不然这个属性就找不到老祖宗了~~

上一篇:npm 代理的设置和取消


下一篇:8、手把手教React Native实战之ReactJS组件生命周期