React Native - Picker

• 

  简述

  在本章中，我们将创建具有两个可用选项的简单 Picker。
• 

  第 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'
     }
  })
  

  输出

  

  如果您单击名称，它会提示您所有三个选项为 -

  

  你可以选择其中一个，输出会是这样的。