React Native-16：选项框组件-Picker

最新推荐文章于 2026-06-10 19:27:03 发布

原创最新推荐文章于 2026-06-10 19:27:03 发布 · 1.8k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

臧小川

收录于

React Native

这篇博客介绍了如何在React Native应用中使用@react-native-picker/picker库来创建一个选择器组件。通过yarn添加依赖，并展示了一个示例代码，包括选择器的初始化、选项设置及值变化监听。示例中包含了性别选择的例子，当选择项发生变化时，会更新用户选择的值并显示。

因为新版本已经把它移出去了 Picker 要在 @react-native-picker/picker 拿到

 yarn add @react-native-picker/picker

import {Picker} from '@react-native-picker/picker';

import React, { useState } from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { Picker } from '@react-native-picker/picker';
const App = () =>
{
    let users = [
        { label: '请选择性别', value: '' },
        { label: '男', value: 'male' },
        { label: '女', value: 'female' },
        { label: '人妖', value: 'YuShen' },
    ]

    const [user, SetUser] = useState('')
    const upDataUser = (user) =>
    {
        console.warn(user);
        SetUser(user)
    }
    return (
        <View style={styles.container}>
            <Text>请选择性别</Text>
            {/* 设置选择器 */}
            <Picker
                selectedValue={user}
                onValueChange={(e) => upDataUser(e)}>
                {
                    // 设置选项
                    users.map((data, index) =>
                        <Picker.Item key={index} label={data.label} value={data.value} />
                    )
                }

            </Picker>
            <Text style={styles.label}>你的选择是 </Text>
            <Text style={styles.text}>{user} </Text>
        </View>
    )
}

export default App

const styles = StyleSheet.create({
    container: {
        margin: 50
    },
    label: {
        fontSize: 14,
        color: '#333'
    },
    text: {
        fontSize: 30,
        alignSelf: 'center',
        color: 'pink'
    }
})