react native组件封装及传值
来源:互联网 发布:java魔法门2手机版攻略 编辑:程序博客网 时间:2024/06/16 12:58
一、组件传值方式
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下面了,反正目前这样可以自动提示属性,至于为什么活着放在其他
地方行不行还不知道,以后再试试,试好了及时更新,好了开始工作了,拜
0 0
- react native组件封装及传值
- react-native组件封装与传值
- React Native-5.React Native组件封装,组件传值实例开发
- react-native 组件封装示例
- react native 封装Touchable 组件
- 将友盟分享封装为React Native组件
- React Native 封装原生UI组件(iOS)
- React Native封装原生UI组件
- react native 封装组件以复用
- React Native中组件的封装使用
- React Native网络状态解析及封装
- React Native-6.React Native Text组件,多组件封装实战之凤凰资讯页面
- React Native之原生UI组件封装---适配Android
- react native 学习笔记----封装Android的原生组件
- 《React-Native系列》38、 ReactNative混合组件封装
- react-native IOS端原生组件封装步骤
- 《React-Native系列》38、 ReactNative混合组件封装
- React Native之原生UI组件封装---适配Android
- 各消息队列对比,Kafka深度解析
- 图解Linux命令之--ulimit命令
- 《视觉SLAM十四讲》书籍图片资源
- vs2015 的key
- Ubuntu16.04 怎样下载deb的源码包
- react native组件封装及传值
- eclipse创建maven依赖的web3.0项目
- 如何将自己写的verilog模块封装成IP核(二)
- C/C++语言sizeof相关计算
- mybatis,mysql,datasource,dpcb连接池的关系
- PopupWindow弹窗
- mysql 一次更新单个表的多个字段
- win svn安装服务端
- Unity脚本-Rotate旋转相关知识总结