随着项目对react native的使用,碰到了很多RN的坑。。。只可惜我不是职业前端,让我一个php来做页面,是在是有些勉强了。。这篇主要是实现RN的单选按钮,上传表单的时候使用的。
github地址:https://github.com/antiantian/radio
**
一、安装组件
**
1、npm i react-native-radio-master –save
2、这个组件不需要npm link
3、项目引用:import RadioModal from ‘react-native-radio-master’;
二、引入组件到项目
1、这个github上有明确的例子,猛的一看好像很麻烦,我们可以先把例子移植到自己的项目中:
import React,{Component} from 'react'
import {
View,
StyleSheet,
Navigator,
TouchableHighlight,
Text,
ScrollView,
Image,
ListView,
} from 'react-native'
var Dimensions = require('Dimensions');
var width=Dimensions.get('window').width;
var height=Dimensions.get('window').height;
import RadioModal from 'react-native-radio-master';
var datas= [
{
"selecteId": 13,
"content": "Apple",
"selected": false
},
{
"selecteId": 14,
"content": "Banana",
"selected": false
},
{
"selecteId": 15,
"content": "Orange",
"selected": false
},
{
"selecteId": 16,
"content": "Watermelon",
"selected": true
},
{
"selecteId": 17,
"content": "Grape",
"selected": false
}
]
export default class RadioModalItem extends Component{
constructor(props){
super(props);
this.state = {
language:datas[3].selecteId,
item:datas[3].content,
initItem:'选项a',
initId:'0'
};
}
render(){
return (
<View style={{padding:20,flex:1,flexDirection:'column'}}>
<Text style={{backgroundColor:'#ffffff',color:'#414141',padding:5,}}>
The selected:<Text style={{color:'#ff0000'}}>{this.state.item}</Text>
</Text>
<Text style={{backgroundColor:'#ffffff',color:'#414141',padding:5,}}>
Unique identification:<Text style={{color:'#ff0000'}}>{this.state.language}</Text>
</Text>
<RadioModal
options={{id:'selecteId',value:'content',disabled:'selected'}}
innerStyle={{width:(width-80)/2}}
txtColor={'#000000'}
noneColor={'#efefef'}
selectedValue={this.state.language}
onValueChange={(id,item) => this.setState({language: id,item:item})}
seledImg={require('./imgs/selected.png')}
selImg={require('./imgs/select.png')}
selnoneImg={require('./imgs/selectnone.png')}
dataOption={datas}
style={{ flexDirection:'row',
flexWrap:'wrap',
alignItems:'flex-start',
flex:1,
backgroundColor:'#ffffff',padding:5,marginTop:10
}}
/>
<Text style={{backgroundColor:'#ffffff',color:'#414141',padding:5,}}>
The selected:<Text style={{color:'#ff0000'}}>{this.state.initItem}</Text>
</Text>
<Text style={{backgroundColor:'#ffffff',color:'#414141',padding:5,}}>
Unique identification:<Text style={{color:'#ff0000'}}>{this.state.initId}</Text>
</Text>
<RadioModal
selectedValue={this.state.initId}
onValueChange={(id,item) => this.setState({initId: id,initItem:item})}
style={{ flexDirection:'row',
flexWrap:'wrap',
alignItems:'flex-start',
flex:1,
backgroundColor:'#ffffff',padding:5,marginTop:10
}}
>
<Text value="0">选项a</Text>
<Text value="1" disabled="true">选项b</Text>
<Text value="2">选项c</Text>
<Text value="3">选项d</Text>
</RadioModal>
</View>
);
}
}
2、这里会发现,作者给了两种方式,不过咱们大多数情况下只需要用一种就行,比如我这里:
我这边是把例子的代码删减了一部分,只用我需要的部分。源代码上面,你点击按钮,会显示你点击的哪一个
类似于这样的按钮
三、使用
1、我们需要的是获取选项框的id或者值。我这边需要的是选项框的值,所以:
onValueChange={(id,item) => this.selected({initItem:item})}
改动了一下onValueChange 函数,传给我们的selectd()方法一个参数,该参数就是选项框的值,
我们可以alert一下:
这里可以看到,我们把需要的选项框的值获取到了。接下来就是根据业务需求,开始你的表演。
end