react-native自定义单选框组件
2017-04-07 13:38
507 查看
http://www.jianshu.com/p/285a99686606
下载:
npm i react-native-radio-master --save
使用:
import RadioModal from 'react-native-radio-master';
代码:
![](http://upload-images.jianshu.io/upload_images/4999533-f2ac444afbe4526d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
效果展示:
![](http://upload-images.jianshu.io/upload_images/4999533-b9832e61ca644065.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
传数据方式:
1:使用 dataOption={datas} 属性;(options此时是必须设置的 id对应数组对象中唯一标识的名字id或者index value:对象中代表文字信息的名字 disabled:默认是否被选中可不填写)<RadioModal dataOption={datas} options={{id:'selecteId',value:'content',disabled:'selected'}} />
2:在RadinModal中直接添加Text组件
<RadioModal>
<Text value={0}>选项1</Text>
<Text value={0}>选项2</Text>
......
</RadioModal>
自定义属性:
innerStyle:定义按钮的样式(宽度背景色等)txtColor:定义按钮文字样式
noneColor:定义不可点击按钮文字样式
seledImg:被选中图片链接
selImg:默认图片链接
selnoneImg:不可用图片链接
style:按钮组样式 可定义是否换行等
事件:
onValueChange={(id,item) => this.setState({initId: id,initItem:item})} //return id(Unique identification) item(Text content)返回参数 id:唯一标识 item:文字信息
github地址:
https://github.com/antiantian/radio
相关文章推荐
- react native中利用Picker自定义日期组件(只包含年和月)
- react-native自定义对话框弹出框组件dialogs
- React Native自定义BadgeView组件
- react-native自定义原生组件
- React-Native 中自定义checkbox组件
- React-native自定义安卓组件
- Android React Native自定义组件的流程
- react-native-0.16.1 自定义Android组件部分的源码初探
- 自定义crosswalk为react-native组件是出现Fatal signal 11 (SIGSEGV) at 0x0000003c (code=1)的问题
- React-Native引用自定义组件
- React-Native系列——自定义View组件开发
- React-Native 中自定义checkbox组件
- React Native 扫码组件react-native-camera与自定义UI界面动画套装
- React-Native系列Android——自定义View组件开发
- react-native 自定义组件
- React-Native引用自定义组件类
- 可能是最in的React Native使用原生自定义下拉刷新组件
- ReactNative自定义Avatar&Badge组件
- React Native自定义标题栏组件的实现方法