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

上一章React Native实战教程请查看：React Native活动指示器ActivityIndicator

在本章中，我们将使用两个可用选项创建简单的选择器。

步骤1：创建文件

在这里，App.js文件夹将用作表示组件。

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={this.state.user} onValueChange={this.updateUser}>
          <Picker.Item label="Steve" value="steve" />
          <Picker.Item label="Ellen" value="ellen" />
          <Picker.Item label="Maria" value="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',
  },
});

输出

如果你点击名字，它会提示你三个选项都为-

你可以从中选择一个输出是这样的。