@react-native-ohos/react-native-picker
v4.5.0
Published
A Native Picker with high performance.
Readme
文档模板：v0.4.2
本项目基于 react-native-picker 开发。
该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：@react-native-ohos/react-native-picker 版本所属关系如下：
| 三方库名称 | 三方库版本（npm地址） | 发布信息 | 支持RN版本 | Autolink | 编译API版本 | 社区基线版本 | 源码地址 | | -------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------- | -------- | ----------- | ------------ | ------------------------------------------------------------ | | @react-native-ohos/react-native-picker | ~ 4.5.0（开发中） | Gitcode Releases | 0.82.* | 是 | API12+ | 4.3.7 | br_rnoh0.82 |
简介
基于原生控件封装的跨平台单选下拉选择器，提供选项渲染、选中回调、多端样式定制能力。
下载安装
进入到工程目录并输入以下命令：
npm
npm install @react-native-ohos/react-native-pickeryarn
yarn add @react-native-ohos/react-native-pickerLink
| | 是否支持autolink | RN框架版本 | |--------------------------------------|-----------------|------------| | ~4.5.0（开发中） | Yes | 0.82 |
使用AutoLink的工程需要根据该文档配置，Autolink框架指导文档：https://gitcode.com/CPF-RN/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md
如您使用的版本支持 Autolink，并且工程已接入 Autolink，可跳过ManualLink配置。
首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 harmony。
1. Overrides RN SDK
为了让工程依赖同一个版本的 RN SDK，需要在工程根目录的 oh-package.json5 添加 overrides 字段，指向工程需要使用的 RN SDK 版本。替换的版本既可以是一个具体的版本号，也可以是一个模糊版本，还可以是本地存在的 HAR 包或源码目录。
关于该字段的作用请阅读官方说明
{
"overrides": {
"@rnoh/react-native-openharmony": "^0.82.32" // ohpm 在线版本
// "@rnoh/react-native-openharmony" : "./react_native_openharmony.har" // 指向本地 har 包的路径
// "@rnoh/react-native-openharmony" : "./react_native_openharmony" // 指向源码路径
}
}2. 引入原生端代码
目前有两种方法：
- 通过 har 包引入；
- 直接链接源码。
方法一：通过 har 包引入（推荐）
[!TIP] har 包位于三方库安装路径的
harmony文件夹下。
打开 entry/oh-package.json5，添加以下依赖
"dependencies": {
"@react-native-ohos/react-native-picker": "file:../../node_modules/@react-native-ohos/react-native-picker/harmony/picker.har"
}点击右上角的 sync 按钮
或者在命令行终端执行：
cd entry
ohpm install方法二：直接链接源码
[!TIP] 如需使用直接链接源码，请参考直接链接源码说明
3. 配置 CMakeLists 和引入 PickerPackage
打开 entry/src/main/cpp/CMakeLists.txt，添加：
project(rnapp)
cmake_minimum_required(VERSION 3.4.1)
set(CMAKE_SKIP_BUILD_RPATH TRUE)
set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}")
set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules")
+ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp")
set(LOG_VERBOSITY_LEVEL 1)
set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments")
set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie")
set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use
add_compile_definitions(WITH_HITRACE_SYSTRACE)
add_subdirectory("${RNOH_CPP_DIR}" ./rn)
# RNOH_BEGIN: manual_package_linking_1
add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package)
+ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-picker/src/main/cpp" ./picker)
# RNOH_END: manual_package_linking_1
file(GLOB GENERATED_CPP_FILES "./generated/*.cpp")
add_library(rnoh_app SHARED
${GENERATED_CPP_FILES}
"./PackageProvider.cpp"
"${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp"
)
target_link_libraries(rnoh_app PUBLIC rnoh)
# RNOH_BEGIN: manual_package_linking_2
target_link_libraries(rnoh_app PUBLIC rnoh_sample_package)
+ target_link_libraries(rnoh_app PUBLIC rnoh_picker)
# RNOH_END: manual_package_linking_2打开 entry/src/main/cpp/PackageProvider.cpp，添加：
#include "RNOH/PackageProvider.h"
#include "SamplePackage.h"
+ #include "PickerPackage.h"
using namespace rnoh;
std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
return {
std::make_shared<SamplePackage>(ctx),
+ std::make_shared<PickerPackage>(ctx),
};
}4. 在 ArkTs 侧引入 PickerViewPackage
打开 entry/src/main/ets/RNPackagesFactory.ts，添加：
...
+ import { PickerViewPackage } from "@react-native-ohos/react-native-picker/ts"
export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
return [
+ new PickerViewPackage(ctx),
];
}运行
点击右上角的 sync 按钮
或者在命令行终端执行：
cd entry
ohpm install然后编译、运行即可。
约束与限制
兼容性
本文档内容基于以下版本验证通过：
- RNOH: 0.82.1; SDK: HarmonyOS 6.0.1 Release SDK; IDE: DevEco Studio 6.0.1 Release; ROM: 6.0.0.120 SP7;
使用示例
下面的代码展示了这个库的基本使用场景：
[!WARNING] 使用时 import 的库名不变。
import React from 'react';
import { View, Button } from 'react-native';
import Picker from 'react-native-picker';
const MyPicker = () => {
let data = {
pickerData:
[{
a: [
{
a1: [1, 2, 3, 4]
},
{
a2: [5, 6, 7, 8]
},
{
a3: [9, 10, 11, 12]
}
]
},
{
b: [
{
b1: [11, 22, 33, 44]
},
{
b2: [55, 66, 77, 88]
},
{
b3: [99, 1010, 1111, 1212]
}
]
},
{
c: [
{
c1: ['a', 'b', 'c']
},
{
c2: ['aa', 'bb', 'cc']
},
{
c3: ['aaa', 'bbb', 'ccc']
}
]
},],
isLoop: false,
selectedValue: ['b', 'b1', 22],
onPickerConfirm: data => {
console.log('onPickerConfirm:', data)
},
onPickerCancel: data => {
console.log('onPickerCancel:', data);
},
onPickerSelect: data => {
console.log('onPickerSelect:', data);
}
}
return (
<View>
<Button title='initPicker' onPress={() => Picker.init(data)} />
<Button title='showPicker' onPress={() => Picker.show()} />
</View>
);
};
export default MyPicker;接口说明
[!TIP] "Platform"列表示该属性在原三方库上支持的平台。
[!TIP] "OpenHarmony Support"列为 yes 表示 OpenHarmony平台支持 该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
组件
| 名称 | 参数类型 | 必填 | 平台 | OpenHarmony平台支持 | 描述 | | ------ | -------- | ---- | ---- | ------------------- | ---------- | | Picker | / | yes | all | yes | Picker组件 |
属性
PickerOptions
| 名称 | 参数类型 | 默认值 | 必填 | 平台 | HarmonyOS平台支持 | 描述 | | --------------------- | -------- | ------------------ | ---- | ------- | ----------------- | -------------------------------------------- | | isLoop | boolean | false | No | All | Yes | 列的内容是否可以循环。 | | pickerTextEllipsisLen | number | 7 | No | Android | Yes | 文本的起始省略长度。 | | pickerConfirmBtnText | string | confirm | No | All | Yes | 确认按钮的文本内容。 | | pickerCancelBtnText | string | cancel | No | All | Yes | 取消按钮的文本内容。 | | pickerTitleText | string | pls select | No | All | Yes | 顶部标题的字体颜色。 | | pickerConfirmBtnColor | array | [1, 186, 245, 1] | No | All | Yes | 确认按钮的字体颜色。 | | pickerCancelBtnColor | array | [1, 186, 245, 1] | No | All | Yes | 取消按钮的字体颜色。 | | pickerTitleColor | array | [20, 20, 20, 1] | No | All | Yes | 顶部标题的字体颜色。 | | pickerToolBarBg | array | [232, 232, 232, 1] | No | All | Yes | 顶部ToolBar的背景色。 | | pickerBg | array | [196, 199, 206, 1] | No | All | Yes | picker的背景色。 | | pickerToolBarFontSize | number | 16 | No | All | Yes | 顶部ToolBar文本的字体大小。 | | wheelFlex | array | [1, 1, 1] | No | All | Yes | picker每一列所占的比例。 | | pickerFontSize | number | 16 | No | All | Yes | picker选择器字体内容的大小。 | | pickerFontColor | array | [31, 31, 31, 1] | No | All | Yes | picker选择器的字体颜色。 | | pickerFontFamily | string | / | No | All | Yes | picker选择器的字体样式。 | | pickerRowHeight | number | 24 | No | iOS | Yes | picker选择器的行高。 | | pickerData | array | / | No | All | Yes | picker选择器所填充的数据。 | | selectedValue | array | / | No | All | Yes | picker选择器所选的默认值。 | | onPickerConfirm | function | item: any[] | No | All | Yes | 点击确认按钮触发的回调函数。 | | onPickerCancel | function | item: any[] | No | All | Yes | 点击取消按钮触发的回调函数。 | | onPickerSelect | function | item: any[] | No | All | Yes | 当picker的选择内容发生改变时触发的回调函数。 |
API
| 名称 | 类型 | 参数类型 | 返回值 | 必填 | 平台 | OpenHarmony平台支持 | 描述 | | ------------ | -------- | ------------------------------------- | ------- | ---- | ---- | ------------------- | ---------------------------- | | init | function | PickerOptions | / | No | All | Yes | 初始化并向选择器传递参数。 | | toggle | function | / | / | No | All | Yes | 显示或隐藏选择器。 | | show | function | / | / | No | All | Yes | 显示选择器。 | | hide | function | / | / | No | All | Yes | 隐藏选择器。 | | select | function | item: any[] | / | No | All | Yes | 选择某一行。 | | isPickerShow | function | fn?: (err: any, message: any) => void | boolean | No | All | Yes | 获取选择器状态，返回布尔值。 |
遗留问题
无
其他
- pickerTextEllipsisLen 参照android效果实现，该属性ios不支持。
- 上游社区库中
select及isPickerShow函数，android及ios实现不同，鸿蒙实现对标ios。 - wheelFlex属性支持在API18及以上使用，低于API18的设备设置此属性无效果。
目录结构
/rntpc_react-native-picker # 项目根目录
├── example # 示例工程
├── harmony # 鸿蒙适配代码
│ └── picker.har # har包
│ └── picker # 鸿蒙适配核心代码
│ └── index.ets # 鸿蒙适配代码入口
│ └── src/main/ets # ArkTS源码
│ └── src/main/cpp # C++源码
├── src # RN代码
│ └── index.tsx # 入口文件
│ └── NativePicker.tsx # Native组件类型定义
├── index.js # JS入口
├── index.d.ts # 类型声明
├── package.json # 包配置
├── CHANGELOG.md # 变更日志
├── LICENSE # 开源许可证
├── OAT.xml # OAT合规配置
├── README.md # 中文安装使用方法
└── README_en.md # 英文安装使用方法 贡献代码
使用过程中发现任何问题都可以提交 Issue，当然，也非常欢迎提交 PR 。
开源协议
本项目基于 Apache License 2.0 ，请自由地享受和参与开源。