React Native的单选、复选、下拉框组件的使用备忘

1. 单选

安装：

npm i react-native-radio-buttons --save

代码：

import React, { Component } from 'react'
import {TouchableWithoutFeedback, Text, View, TouchableHighlight, TextInput, CheckBox } from 'react-native'
import { RadioButtons } from 'react-native-radio-buttons'

export default class App4 extends Component {
    constructor(props){
        super(props)
        this.state={gender:'男'}
    }

    _genderChangHandler=gender=>{
        this.setState({gender})
    }
    _renderOption=(option, selected, onSelect, index)=>{
        const style = selected ? { fontWeight: 'bold',color:'red'} : {};
       
          return (
            <TouchableWithoutFeedback onPress={onSelect} key={index}>
              <Text style={style}>{option}</Text>
            </TouchableWithoutFeedback>
          );
    }

    render() {
        const options = ["男","女", "其它"];
        return (
          <View style={{margin: 20}}>
            <RadioButtons
              options={ options }
              onSelection={ this._genderChangHandler }
              selectedOption={this.state.gender }
              renderOption={ this._renderOption }
              renderContainer={optionNodes=> <View>{optionNodes}</View> }
            />
            <Text>您本人的性别是：{this.state.gender}</Text>
          </View>);
      }
}

2. 复选：

安装：

npm i react-native-check-box --save

代码：

import React, { Component } from 'react'
import { Text, View } from 'react-native'
import CheckBox from 'react-native-check-box'

export default class App5 extends Component {
    constructor(props) {
        super(props)
        this.state = { favs: ['swim'] }
    }
    _favChangeHandler = fav => {
        let favs = this.state.favs.slice(0)
        let index = favs.indexOf(fav)

        if (index >= 0) favs.splice(index, 1)
        else favs.push(fav)

        this.setState({favs})
    }
    render() {
        return (
            <View>
                <CheckBox
                    style={{ flex: 1, padding: 20 }}
                    onClick={() =>this._favChangeHandler('swim')}
                    isChecked={this.state.favs.includes('swim')}
                    rightText={"游泳"}
                />
                <CheckBox
                    style={{ flex: 1, padding: 20 }}
                    onClick={() => this._favChangeHandler('foot')}
                    isChecked={this.state.favs.includes('foot')}
                    rightText={"足球"}
                />
                <Text>你的爱好是：{this.state.favs.join(",")}</Text>
            </View>
        )
    }
}

3. 下拉选择：

安装：

npm i react-native-modal-dropdown -save

代码：

import React, { Component } from 'react'
import { Text, View } from 'react-native'
import ModalDropdown from 'react-native-modal-dropdown';

export default class App6 extends Component {
    _majorChangeHandler=(index,item)=>{
        console.log(index,item)
    }
    render() {
        let majors=["计算机科学","软件工程","移动云计算"]
        return (
            <View >
                <ModalDropdown onSelect={this._majorChangeHandler} 
                defaultValue="请选择您的专业..."
                dropdownTextStyle={{fontSize:22,color:'blue'}} 
                textStyle={{fontSize:30,color:'red'}}
                dropdownTextHighlightStyle={{backgroundColor:"red",color:'yellow'}}
                options={majors}/>
                <Text>您的专业是：</Text>
            </View>
        )
    }
}