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}/>
您的专业是：
)
}
}