React Native选择器Picker – React Native实战教程 _ReactNative实战教程

上一章React Native实战教程请查看：React Native活动指示器ActivityIndicator
在本章中，我们将使用两个可用选项创建简单的选择器。
步骤1：创建文件在这里，App.js文件夹将用作表示组件。
【React Native选择器Picker – React Native实战教程】App.js

import React from 'react'; import PickerExample from './PickerExample.js'; const App = () => { return < PickerExample />; }; export default App;

步骤2：逻辑this.state.user用于选择控件。
当用户被选中时，updateUser函数将被触发。
PickerExample.js

import React, {Component} from 'react'; import {View, Text, Picker, StyleSheet} from 'react-native'; class PickerExample extends Component { state = {user: ''}; updateUser = user => { this.setState({user: user}); }; render() { return ( < View> < Picker selectedValue=http://www.srcmini.com/{this.state.user} onValueChange={this.updateUser}> < Picker.Item label="Steve" value="http://www.srcmini.com/steve" /> < Picker.Item label="Ellen" value="http://www.srcmini.com/ellen" /> < Picker.Item label="Maria" value="http://www.srcmini.com/maria" /> < /Picker> < Text style={styles.text}>{this.state.user}< /Text> < /View> ); } } export default PickerExample; const styles = StyleSheet.create({ text: { fontSize: 30, alignSelf: 'center', color: 'red', }, });

输出