这里是只有苹果的,如果想适配andorid,可以在showPickerFun方法里面使用platefrom判断
代码:
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity, Picker
} from 'react-native';
var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get("window");
export default class MyApp extends Component {
constructor(props) {
super(props);
this.state = {
language: "i",//默认选择的
position: "0",//第几个
showpicker: false,//是否显示picker
surePicker:''//点击确定选择的value
}
}
showPickerFun() {
if (this.state.showpicker) {
return <View style={{position: "absolute", bottom: 0, left: 0, backgroundColor: '#0000ff'}}>
<View style={styles.pickerTop}>
<TouchableOpacity onPress={() => this.setState({showpicker: false})}>
<Text>取消</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.setState({showpicker:false,surePicker:this.state.language})}>
<Text>确认</Text>
</TouchableOpacity>
</View>
<Picker
selectedValue={this.state.language}
style={{height: 200, width: width}}
onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue, position: itemIndex})}>
<Picker.Item label="1" value="a" itemStyle={styles.itemStyle}/>
<Picker.Item label="2" value="b"/>
<Picker.Item label="3" value="c"/>
<Picker.Item label="4" value="d"/>
<Picker.Item label="5" value="e"/>
<Picker.Item label="6" value="f"/>
<Picker.Item label="7" value="g"/>
<Picker.Item label="8" value="h"/>
<Picker.Item label="9" value="i"/>
</Picker>
</View>
} else {
return null
}
}
render() {
return (
<View style={styles.wrapper}>
<TouchableOpacity onPress={() => this.setState({showpicker: true})}>
<Text>show or hide Picker</Text>
</TouchableOpacity>
{this.showPickerFun()}
<Text style={{marginTop: 20}}>onValueChange事件:{this.state.language}:{this.state.position}</Text>
<Text style={{marginTop: 20}}>点击确定的value:{this.state.surePicker}</Text>
</View>
)
}
}
const styles = StyleSheet.create({
wrapper: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
itemStyle: {
width: 100, height: 50,
fontSize: 25,
},
pickerTop: {
height: 34,
justifyContent: 'space-between',//分布方式
flexDirection: 'row',//横向布局
alignItems: 'center',//侧轴居中
paddingLeft: 5,
paddingRight: 5
}
});