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