React Native选择器Picker
·
- 如果要从多个已知的选项中选择一个,那么可以使用React Native内置的选择器
- 选择器类似于HTML中的select标签
import React, { Component } from 'react';
import { View, Text, Picker, StyleSheet } from 'react-native'
class App extends Component {
users = [
{label: '请选择性别',value:''},
{label: '男',value:'male'},
{label: '女',value:'female'},
{label: '其它',value:'other'}
]
state = {user: ''}
updateUser = (user) => {
this.setState({ user: user })
}
render() {
return (
<View style={styles.container}>
<Text style = {styles.label}>请选择性别</Text>
{/* 设置选择器 */}
<Picker
selectedValue = {this.state.user}
onValueChange = {this.updateUser}>
{
// 设置选项
this.users.map((o,index) =>
<Picker.Item label={o.label} value = {o.value}/>
)
}
</Picker>
<Text style = {styles.label}>你的选择是</Text>
<Text style = {styles.text}>{this.state.user}</Text>
</View>
)
}
}
export default App
const styles = StyleSheet.create({
container: {
margin:50,
},
label: {
fontSize: 14,
color:'#333333'
},
text: {
fontSize: 30,
alignSelf: 'center',
color: 'red'
}
})
更多推荐


所有评论(0)