1. 程式人生 > >react-native自定義單選框元件

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地址: