📜  React Native-选择器

📅  最后修改于: 2020-12-08 06:11:44             🧑  作者: Mango


在本章中,我们将创建带有两个可用选项的简单Picker。

步骤1:建立档案

在这里, App.js文件夹将用作演示组件。

App.js

import React from 'react'
import PickerExample from './PickerExample.js'

const App = () => {
   return (
      
   )
}
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 (
         
            
               
               
               
            
            {this.state.user}
         
      )
   }
}
export default PickerExample

const styles = StyleSheet.create({
   text: {
      fontSize: 30,
      alignSelf: 'center',
      color: 'red'
   }
})

输出

反应本机选择器

如果单击名称,则会提示您所有三个选项,分别为-

反应本机选择器

您可以选择其中之一,输出将类似于。

反应本机选择器