Picker 开源项目教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01103/article/details/141044822

Picker 开源项目教程

pickerPicker is a cross-platform UI component for selecting an item from a list of options.项目地址:https://gitcode.com/gh_mirrors/pi/picker

1. 项目介绍

Picker 是一个用于 React Native 的原生选择器组件，提供了一种简单的方式来创建滚动选择列表，可用于展示单选或多选的选项。它基于原生 iOS 和 Android 控件，确保了在各个平台上的一致性和高性能。该项目的目的是提供一个开箱即用的解决方案，替代早期版本中集成在 react-native 核心库中的 Picker。

GitHub 地址：https://github.com/react-native-picker/picker.git

2. 项目快速启动

安装依赖

首先，确保你的项目已经配置了 React Native 环境。然后，在你的项目根目录运行以下命令安装 react-native-picker：

npm install @react-native-picker/picker
# 或者使用 yarn
yarn add @react-native-picker/picker

链接原生代码（如果需要）

对于 RN 版本 < 0.60，你需要手动链接原生代码：

cd ios
pod install
cd ..

示例代码

现在，你可以将以下代码添加到你的 React Native 应用中来使用 Picker 组件：

import React from 'react';
import { View, Text } from 'react-native';
import { Picker } from '@react-native-picker/picker';

const App = () => {
  const [selectedItem, setSelectedItem] = React.useState(null);

  return (
    <View style={{ flex: 1 }}>
      <Picker
        selectedValue={selectedItem}
        onValueChange={(itemValue, itemIndex) =>
          setSelectedItem(itemValue)
        }>
        <Picker.Item label="Apple" value="apple" />
        <Picker.Item label="Banana" value="banana" />
        <Picker.Item label="Cherry" value="cherry" />
      </Picker>
      <Text>{selectedItem}</Text>
    </View>
  );
};

export default App;

3. 应用案例和最佳实践

动态数据加载：你可以通过 useState 或 useEffect 来实现从远程服务器获取数据并填充到 Picker。
自定义样式：使用 style 属性可以调整组件外观，例如字体大小、颜色等。
多选模式：虽然 Picker 默认是单选模式，但可以通过其他库如 @react-native-community/multiselect 实现多选功能。
处理触摸事件：如果你需要在选项选择时执行特定操作，可以添加 onPress 回调。