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

    输出

    反应原生选择器
    如果您单击名称,它会提示您所有三个选项为 -
    反应原生选择器
    你可以选择其中一个,输出会是这样的。
    反应原生选择器