react-native自定义单选框组件

下载:

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,123评论 25 709
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 11,870评论 0 17
  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 7,858评论 1 18
  • 上周末,我奔波在医院。 这周,孩子奶奶头晕头疼,舌头麻,原因是血脂高,血压高,血糖也不低。需要挂吊瓶一周。 宝贝每...
    多维保咨询阅读 2,350评论 0 0
  • 克劳德·莫奈(Claude Monet,1840年11月14日-1926年12月5日),法国画家,被誉为“印象派领...
    叶丹红阅读 3,122评论 0 0

友情链接更多精彩内容