react-native自定义单选框组件

http://www.jianshu.com/p/285a99686606

下载:

npm i react-native-radio-master --save 

使用:

import RadioModal from 'react-native-radio-master';

代码:



效果展示:



传数据方式:

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值