react native的单选按钮react-native-radio-master

随着项目对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