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