react-native自定義單選框元件
阿新 • • 發佈:2019-01-27
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:文字資訊