React Native控件之Picker

时间:2023-03-09 08:28:14
React Native控件之Picker

1.React Native控件之Picker

import React,{Component}from 'react';
import {
AppRegistry, StyleSheet,
Text,
View,
Picker,
} from 'react-native'; var PickerDemo = React.createClass({
getInitialState: function() {
return {
language: '',
};
},
render() {
return (
<View style={styles.container}>
<Text >
Picker选择器实例
</Text>
<Picker
style={{width:200}}
selectedValue={this.state.language}
onValueChange={(value) => this.setState({language: value})}>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="javaScript" />
</Picker>
<Text>当前选择的是:{this.state.language}</Text>
</View>
);
}
});
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});
AppRegistry.registerComponent('Allen', () => PickerDemo)