react native组件封装及传值

一、组件传值方式

1、向组件传值

<MyCommponent 
    value1="传入文字类别数据"

    value2={true} //传入boolen数据
    value3={[{key1:"值1"},{key2:"值2"}]}//传入数组对象
    value4={()=>{Alert.alert("传入回调方法")}}
    value5 = {2}//传入数值
/>

2、组件获取值

再MyCommponent内部调用

this.props.value1

3、组件与引用组件的地方通过方法回调实时传值

1中的value4可以改写为value4={ (name,sex) => {return "向MyCommponent传递的数据"} } //name和sex是MyCommponent传过来的数据

在MyCommponent中使用回调let getValue = this.props.value4("小明他爸","boy")

4、除了可以向组件传值外，还可以向组件传module（或者简单的控件）

eg:

传入

<MyCommponent>

   <Text> 这个是传入到子组件的空间</Text>

</MyCommponent>

在MyCommponent中接收

render(){

return(
this.props.children

);

}

注意上面的children代表传过来的<Text>，必须写children，如果传多个并列的组件就需要先从children中一个一个取出来，并列的组件会以集合的形式传过来

二、组件封装的一些规范和技巧

1、方法的抽取（可以抽去到令人发指，目的就是以后调试方便，模块化开发嘛）

封装组件的目的是为了组件的复用，而复用本身就需要支持调用方多种需求，面对多种需求就需要做多种判断，为了代码的间接性和可读性，把每一个需要调用方做判断的地方都

抽取出来；方便以后的业务更改；

2、设置引用组件时属性的自动提示功能

//组件引用说明
RadioButtonGroupView.propTypes={
        itemWidth:PropTypes.number, //手动设置radio框的宽度，如果没有设置就默认为 itemWidth
        itemHeight:React.PropTypes.number, //手动设置radio框的高度，如果没有设置就默认为 itemHeight
        dataSource:PropTypes.array, //手动输入数据源，必须是固定格式必须填，格式如下dataSource = [{name:'智慧政务'},{name:'便民服务'},{name:'坚果狂欢'},{name:'水果盛宴'}];
        itemSelectedId:PropTypes.number, //默认选中的条目，默认为0
        itemBeClicked:PropTypes.func, //回调函数，用于回传点击的哪个条目,(item,i)，第一个item是条目中的对象，i表示条目地址
}

其中RadioButtonGroupView是你封装的组件的名字，这些代码需要放在整个类的下方，我是放在style下面了，反正目前这样可以自动提示属性，至于为什么活着放在其他

地方行不行还不知道，以后再试试，试好了及时更新，好了开始工作了，拜

react native组件封装及传值

猜你喜欢