selection下拉框_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 (

{option}

);

}

render() {

const options = ["男","女", "其它"];

return (

options={ options }

onSelection={ this._genderChangHandler }

selectedOption={this.state.gender }

renderOption={ this._renderOption }

renderContainer={optionNodes=> {optionNodes} }

/>

您本人的性别是：{this.state.gender}

);

}

}

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 (

style={{ flex: 1, padding: 20 }}

onClick={() =>this._favChangeHandler('swim')}

isChecked={this.state.favs.includes('swim')}

rightText={"游泳"}

/>

style={{ flex: 1, padding: 20 }}

onClick={() => this._favChangeHandler('foot')}

isChecked={this.state.favs.includes('foot')}

rightText={"足球"}

/>

你的爱好是：{this.state.favs.join(",")}

)

}

}

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 (

defaultValue="请选择您的专业..."

dropdownTextStyle={{fontSize:22,color:'blue'}}

textStyle={{fontSize:30,color:'red'}}

dropdownTextHighlightStyle={{backgroundColor:"red",color:'yellow'}}

options={majors}/>

您的专业是：

)

}

}