diff --git a/en/react-native-picker-select.md b/en/react-native-picker-select.md index e7de8d1edff4f9bf73149d96171b0b07d8394a52..0c96ad3ef70fe23c1a669f8a8418f6b130a1650f 100644 --- a/en/react-native-picker-select.md +++ b/en/react-native-picker-select.md @@ -16,7 +16,14 @@ ## Installation and Usage -Find the matching version information in the release address of a third-party library:[@react-native-oh-tpl/react-native-picker-select Releases](https://github.com/react-native-oh-library/react-native-picker-select/releases).For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. +Find the matching version information in the release address of a third-party library. + +| Version | Releases info | Support RN version | +| ---------- | ------------------------------------------------------------ | ---------- | +| 9.3.1 | [@react-native-oh-tpl/react-native-picker-select Releases](https://github.com/react-native-oh-library/react-native-picker-select/releases) | 0.72 | +| 9.4.0 | [@react-native-ohos/react-native-picker-select Releases]() | 0.77 | + +For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. Go to the project directory and execute the following instruction: @@ -25,13 +32,21 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash +# 0.72 npm install @react-native-oh-tpl/react-native-picker-select + +# 0.77 +npm install @react-native-ohos/react-native-picker-select ``` #### **yarn** ```bash +# 0.72 yarn add @react-native-oh-tpl/react-native-picker-select + +# 0.77 +yarn add @react-native-ohos/react-native-picker-select ``` @@ -192,7 +207,14 @@ If it is not included, follow the guide provided in @react-native-oh-tpl/@react- To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. -Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-picker-select Releases](https://github.com/react-native-oh-library/react-native-picker-select/releases) +Find the matching version information in the release address of a third-party library. + +| Version | Releases info | Support RN version | +| ---------- | ------------------------------------------------------------ | ---------- | +| 9.3.1 | [@react-native-oh-tpl/react-native-picker-select Releases](https://github.com/react-native-oh-library/react-native-picker-select/releases) | 0.72 | +| 9.4.0 | [@react-native-ohos/react-native-picker-select Releases]() | 0.77 | + +For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. ## Properties diff --git a/zh-cn/react-native-picker-select.md b/zh-cn/react-native-picker-select.md index bef59199778b08b945b192650abe8ada218b5129..2cfa6acbcbcab853c65e29d0a030c5cb5648d10e 100644 --- a/zh-cn/react-native-picker-select.md +++ b/zh-cn/react-native-picker-select.md @@ -16,7 +16,13 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息:[@react-native-oh-tpl/react-native-picker-select Releases](https://github.com/react-native-oh-library/react-native-picker-select/releases) 。对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息: +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 9.3.1 | [@react-native-oh-tpl/react-native-picker-select Releases](https://github.com/react-native-oh-library/react-native-picker-select/releases) | 0.72 | +| 9.4.0 | [@react-native-ohos/react-native-picker-select Releases]() | 0.77 | + +对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令: @@ -25,13 +31,21 @@ #### **npm** ```bash +# 0.72 npm install @react-native-oh-tpl/react-native-picker-select + +# 0.77 +npm install @react-native-ohos/react-native-picker-select ``` #### **yarn** ```bash +# 0.72 yarn add @react-native-oh-tpl/react-native-picker-select + +# 0.77 +yarn add @react-native-ohos/react-native-picker-select ``` @@ -191,38 +205,45 @@ const styles = StyleSheet.create({ 要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息:[@react-native-oh-tpl/react-native-picker-select Releases](https://github.com/react-native-oh-library/react-native-picker-select/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息: +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 9.3.1 | [@react-native-oh-tpl/react-native-picker-select Releases](https://github.com/react-native-oh-library/react-native-picker-select/releases) | 0.72 | +| 9.4.0 | [@react-native-ohos/react-native-picker-select Releases]() | 0.77 | + +对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 ## 属性 -> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 +> [!TIP] "支持平台"列表示该属性在原三方库上支持的平台。 -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。 +> [!TIP] "鸿蒙支持"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Default | Required | Platform | HarmonyOS Support | +| +属性名 | 描述 | 类型 | 默认值 | 是否必填 | 支持平台 | 鸿蒙支持 | | --- | --- | --- | --- | --- | --- | --- | -| onValueChange | Callback which returns `value, index`. | function | null | yes | All | yes | -| items | The items for the component to render.
- Each item should be in the following format:
`{label: 'Orange', value: 'orange', key: 'orange', color: 'orange', inputLabel: 'Orange!', testID: 'e2e-orange'}`
- `label` and `value` are required
- `key`, `color`, `testID`, and `inputLabel` are optional
- `key` will be set to equal `label` if not included
- `value` can be any data type
- If `inputLabel` exists, the TextInput will display that value instead of the `label` | array | null | yes | All | yes | -| placeholder | - An override for the default placeholder object with a label of `Select an item...` and a value of `null`.
- An empty object can be used if you'd like to disable the placeholder entirely. | object | null | no | All | yes | -| disabled | Disables interaction with the component. | boolean | false | no | All | yes | -| value | Will attempt to locate a matching item from the `items` array by checking each item's `value` property. If found, it will update the component to show that item as selected. If the value is not found, it will default to the first item. **WARNING:** do not use this attribute on iOS if you plan to allow the user to modify the value from within the `Picker`, use `itemKey` instead. | any | null | no | All | yes | -| itemKey | Will attempt to locate a matching item from the `items` array by checking each item's `key` property. If found, it will update the component to show that item as selected. If the key is not found, it will attempt to find a matching item by `value` as above. | string, number | undefined | no | All | yes | -| style | Style overrides for most parts of the component.
_More details in [styling](https://github.com/lawnstarter/react-native-picker-select?tab=readme-ov-file#styling)_. | object | {} | no | All | yes | -| darkTheme | Use the dark theme for the Picker. | boolean | false | no | iOS | yes | -| pickerProps | Additional props to pass to the Picker (some props are used in core functionality so use this carefully). | object | {} | no | All | yes | -| Icon | Custom icon component to be rendered.
_More details in [styling](https://github.com/lawnstarter/react-native-picker-select?tab=readme-ov-file#styling)_. | Component | null | no | All | yes | -| textInputProps | Additional props to pass to the TextInput (some props are used in core functionality so use this carefully). This is iOS only unless `useNativeAndroidPickerStyle={false}`. | object | {} | no | All | yes | -| touchableWrapperProps | Additional props to pass to the touchable wrapping the TextInput (some props are used in core functionality so use this carefully). | object | {} | no | All | yes | -| onOpen() | Callback triggered right before the opening of the picker.
_Not supported when `useNativeAndroidPickerStyle={true}`_. | function | null | no | All | yes | -| useNativeAndroidPickerStyle | The component defaults to using the native Android Picker in its un-selected state. Setting this flag to `false` will mimic the default iOS presentation where a tappable TextInput is displayed.
_More details in [styling](https://github.com/lawnstarter/react-native-picker-select?tab=readme-ov-file#styling)_. | boolean | true | no | Android | no | -| fixAndroidTouchableBug | Experimental flag to fix issue [#354](https://github.com/lawnstarter/react-native-picker-select/issues/354). | boolean | false | no | Android | no | -| InputAccessoryView | Replace the InputAcessoryView section (bar with tabbing arrown and Done button) of the opened picker with your own custom component. Can also return `null` here to hide completely. While this bar is typical on `select` elements on the web, the [interface guidelines](https://developer.apple.com/ios/human-interface-guidelines/controls/pickers/) does not include it. View the [snack](https://snack.expo.io/@lfkwtz/react-native-picker-select) to see examples on how this can be customized. | Component | null | no | iOS | yes | -| doneText | "Done" default text on the modal. Can be overwritten here. | string | "Done" | no | iOS | yes | -| onUpArrow() \/ onDownArrow() | Presence enables the corresponding arrow.
- Closes the picker.
- Calls the callback provided. | function | null | no | iOS | yes | -| onDonePress() | Callback when the 'Done' button is pressed. | function | null | no | iOS | yes | -| onClose(Bool) | Callback triggered right before the closing of the picker. It has one boolean parameter indicating if the done button was pressed or not. | function | null | no | iOS | yes | -| modalProps | Additional props to pass to the Modal (some props are used in core functionality so use this carefully). | function | null | no | iOS | yes | -| touchableDoneProps | Additional props to pass to the Done touchable (some props are used in core functionality so use this carefully). | function | null | no | iOS | yes | +| onValueChange | 选中值变更回调函数,返回 `value, index`参数。 | function | null | yes | All | yes | +| items | 组件要渲染的选项数据。
- 每个选项的数据格式:
`{label: 'Orange', value: 'orange', key: 'orange', color: 'orange', inputLabel: 'Orange!', testID: 'e2e-orange'}`
- `label` 和 `value` 为必需字段
- `key`, `color`, `testID`, 和 `inputLabel` 为可选字段
- 未设置`key` 时默认使用 `label` 值
- `value` 支持任意数据类型
- 设置 `inputLabel` 时输入框将显示该值替代`label` | array | null | yes | All | yes | +| placeholder | - 自定义占位符配置,默认显示 `Select an item...` ,值为 null `null`.
- 可以使用空对象来禁用占位符。 | object | null | no | All | yes | +| disabled | 禁用与组件的交互。 | boolean | false | no | All | yes | +| value | 通过匹配 `items` 数组中项的 `value` 属性来选择当前选中项。找到匹配项时更新组件显示状态,未找到时默认选中首项。 **WARNING:** 在 iOS 平台,如需支持用户通过 `Picker` 交互动态更新选中值, 建议使用 `itemKey` 属性替代。 | any | null | no | All | yes | +| itemKey | 通过匹配 `items` 数组中项的 `key` 属性来定位选中项。若找到匹配的 `key` ,则更新组件显示对应项为选中状态;若未找到匹配的 `key` ,则回退至 `value` 匹配逻辑。 | string, number | undefined | no | All | yes | +| style | 组件样式覆盖配置。
_详见 [styling](https://github.com/lawnstarter/react-native-picker-select?tab=readme-ov-file#styling)_. | object | {} | no | All | yes | +| darkTheme | 启用选择器深色主题。 | boolean | false | no | iOS | yes | +| pickerProps | 传递给选择器的附加属性(部分属性涉及核心功能逻辑,请谨慎使用)。 | object | {} | no | All | yes | +| Icon | 自定义图标组件。
_详见 [styling](https://github.com/lawnstarter/react-native-picker-select?tab=readme-ov-file#示例项目 )_. | Component | null | no | All | yes | +| textInputProps | 透传给 TextInput 组件的附加属性(部分属性涉及核心功能逻辑,请谨慎使用)。默认仅 iOS 平台生效,除非设置 `useNativeAndroidPickerStyle={false}`. | object | {} | no | All | yes | +| touchableWrapperProps | 传递给文本输入框包装容器的附加属性(部分属性涉及核心功能逻辑,请谨慎使用)。 | object | {} | no | All | yes | +| onOpen() | 选择器打开前立即触发的回调。
_使用 `useNativeAndroidPickerStyle={true}`时不支持。_ | function | null | no | All | yes | +| useNativeAndroidPickerStyle | 组件默认在未选中状态使用原生 Android 选择器样式。设置为 `false` 时将模拟 iOS 默认表现,显示可点击的文本输入框。
_详见 [styling](https://github.com/lawnstarter/react-native-picker-select?tab=readme-ov-file#styling)_. | boolean | true | no | Android | no | +| fixAndroidTouchableBug | 修复 [#354](https://github.com/lawnstarter/react-native-picker-select/issues/354). | boolean | false | no | Android | no | +| InputAccessoryView | 用于替换选择器顶部 InputAcessoryView 区域(包含选项卡箭头和完成按钮的工具栏)的自定义组件。可返回 `null` 完全隐藏该区域。虽然此类工具栏在 Web `select` 元素中常见,但 [interface guidelines](https://developer.apple.com/ios/human-interface-guidelines/controls/pickers/) 未包含此设计。查看 [示例项目 ](https://snack.expo.io/@lfkwtz/react-native-picker-select) 了解自定义实现方式。 | Component | null | no | iOS | yes | +| doneText | 模态框中"Done"按钮的默认文本,支持自定义覆盖。 | string | "Done" | no | iOS | yes | +| onUpArrow() \/ onDownArrow() | 设置此回调函数启用对应方向箭头功能:
- 关闭选择器
- 执行提供的回调逻辑 | function | null | no | iOS | yes | +| onDonePress() | 点击完成按钮时触发的回调函数。 | function | null | no | iOS | yes | +| onClose(Bool) | 选择器关闭前立即触发的回调函数,包含一个布尔参数标识是否通过完成按钮关闭。 | function | null | no | iOS | yes | +| modalProps | 透传给 Modal 组件的附加属性(部分属性涉及核心功能逻辑,请谨慎使用)。 | function | null | no | iOS | yes | +| touchableDoneProps | 透传给完成按钮 Touchable 组件的附加属性(部分属性涉及核心功能逻辑,请谨慎使用)。 | function | null | no | iOS | yes | ## 遗留问题