React Native 选择器组件

在本文中，我们将了解如何在 react-native 中创建选择器。为此，我们将使用 Picker 组件。它用于从多个给定选项中选择特定项目。基本上，它就像一个下拉列表。

句法：

选择器中的道具：

• enabled：如果为 false，则用户将无法进行选择。
• itemStyle：用于设置项目标签的样式。
• mode：决定选中项如何显示，仅在android平台上可用。
• onValueChange：当item被选中时的回调函数，它有两个参数，第一个是改变的值，第二个是item的索引。
• 提示：它显示为对话框的标题，并且 它仅在 android 平台上可用。
• selectedValue：显示选择的值。
• style：它基本上是选择器的样式。
• testID：用于在端到端测试中定位该视图。

现在让我们从实现开始：

第 1 步：打开终端并通过以下命令安装 expo-cli。

npm install -g expo-cli

第2步：现在通过以下命令创建一个项目。

expo init myapp

第 3 步：现在进入您的项目文件夹，即 myapp

cd myapp

第 4 步：对于选择器，我们在 React Native 中有一个选择器组件，但该组件现在已弃用，因此我们将使用一个名为 react-native-picker 的外部包来代替它。使用以下命令安装该软件包。

npm install @react-native-picker/picker

项目结构：

示例：现在让我们实现 Picker。在这里，我们创建了一个课程选择器。

应用程序.js

Javascript

import React , {useState} from 'react';
import { StyleSheet, View} from 'react-native';
import {Picker} from "@react-native-picker/picker";
export default function App() {
  
  const [Enable , setEnable]  = useState("courses");
  
  return (
    
         setEnable(itemValue)}
        >
           // Items
          
          
          
          
          
          
        
    
  );
}
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

使用以下命令启动服务器。

npm run android

输出：如果你的模拟器没有自动打开，那么你需要手动打开。首先，去你的安卓工作室并运行模拟器。现在再次启动服务器。

参考： https://reactnative.dev/docs/picker