From bb779ce67ebfbe70fbd12b646666e5fa23839180 Mon Sep 17 00:00:00 2001 From: Gyzztzj Date: Thu, 4 Jul 2024 19:03:17 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20[#IAG4FQ]=20=E4=BF=AE=E6=94=B9react-nat?= =?UTF-8?q?ive-community/segmented-control=E6=8C=87=E5=AF=BC=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 7 ++- ...eact-native-community-segmented-control.md | 61 +++++++++++-------- 2 files changed, 41 insertions(+), 27 deletions(-) diff --git a/README.md b/README.md index 8ecc18b0..bd9f8dbd 100644 --- a/README.md +++ b/README.md @@ -37,10 +37,10 @@ | 11 | [@react-native-community/push-notification-ios](https://github.com/react-native-push-notification/ios) | 1.11.0 | 否 | [@react-native-oh-tpl/push-notification-ios](https://github.com/react-native-oh-library/react-native-push-notification-ios/releases) | [链接](/zh-cn/react-native-community-push-notification-ios.md) | | 12 | [@react-native-community/slider](https://github.com/callstack/react-native-slider) | 4.4.3 | 是 | [@react-native-oh-tpl/slider](https://github.com/react-native-oh-library/react-native-slider/releases) | [链接](/zh-cn/react-native-community-slider.md) | | 13 | [@react-native-community/toolbar-android](https://github.com/react-native-toolbar-android/toolbar-android) | 0.2.1 | 是 | [@react-native-oh-tpl/toolbar-android](https://github.com/react-native-oh-library/toolbar-android/releases) | [链接](/zh-cn/react-native-toolbar-android.md) | -| 14 | [@react-native-cookies/cookies](https://github.com/react-native-cookies/cookies) | 6.2.1 | 否 | [@react-native-oh-tpl/cookies](https://github.com/react-native-oh-library/react-native-cookies/releases) | [链接](/zh-cn/react-native-cookies.md) | +| 14 | [@react-native-cookies/cookies](https://github.com/react-native-cookies/cookies) | 6.2.1 | 否 | [@react-native-oh-tpl/cookies](https://github.com/react-native-oh-library/react-native-cookies/releases) | [链接](/zh-cn/react-native-cookies-cookies.md) | | 15 | [@react-native-masked-view/masked-view](https://github.com/react-native-masked-view/masked-view) | 0.2.9 | 否 | [@react-native-oh-tpl/masked-view](https://github.com/react-native-oh-library/masked-view/releases) | [链接](/zh-cn/react-native-masked-view-masked-view.md) | | 16 | [@react-native-picker/picker](https://github.com/react-native-picker/picker) | 2.5.1 | 是 | [@react-native-oh-tpl/picker](https://github.com/react-native-oh-library/picker/releases) | [链接](/zh-cn/react-native-picker-picker.md) | -| 17 | [@react-native-segmented-control/segmented-control](https://github.com/react-native-segmented-control/segmented-control) | 2.5.0 | \- | \- | [链接](/zh-cn/react-native-community-segmented-control.md) | +| 17 | [@react-native-segmented-control/segmented-control](https://github.com/react-native-segmented-control/segmented-control) | 2.5.2 | \- | [@react-native-oh-tpl/segmented-control](https://github.com/react-native-oh-library/segmented-control/releases) | [链接](/zh-cn/react-native-community-segmented-control.md) | | 18 | [@react-navigation/bottom-tabs](https://github.com/react-navigation/react-navigation/tree/6.x/packages/bottom-tabs) | 6.5.11 | \- | \- | [链接](/zh-cn/react-navigation-bottom-tabs.md) | | 19 | [@react-navigation/elements](https://github.com/react-navigation/react-navigation/tree/6.x/packages/elements) | 1.3.21 | \- | [@react-native-oh-tpl/elements](https://github.com/react-native-oh-library/react-navigation/releases) | [链接](/zh-cn/react-navigation-elements.md) | | 20 | [@react-navigation/native](https://github.com/react-navigation/react-navigation/tree/6.x/packages/native) | 6.1.9 | \- | \- | [链接](/zh-cn/react-navigation-native.md) | @@ -178,7 +178,8 @@ | 152 | [react-native-root-modal](https://github.com/magicismight/react-native-root-modal) | 5.0.0 | 否 | [@react-native-oh-tpl/react-native-root-modal](https://github.com/react-native-oh-library/react-native-root-modal/releases) | [链接](/zh-cn/react-native-root-modal.md) | | 153 | [react-native-switch-pro](https://github.com/poberwong/react-native-switch-pro) | 1.0.5 | 否 | [@react-native-oh-tpl/react-native-switch-pro](https://github.com/react-native-oh-library/react-native-switch-pro/releases) | [链接](/zh-cn/react-native-switch-pro.md) | | 154 | [react-native-drop-shadow](https://github.com/hoanglam10499/react-native-drop-shadow) | 1.0.0 | \- | \- | [链接](/zh-cn/react-native-drop-shadow.md) | -| 155 | [react-native-nested-scroll-view](https://github.com/cesardeazevedo/react-native-nested-scroll-view) | 9.0.0 | 否 | [@react-native-oh-tpl/react-native-nested-scroll-view](https://github.com/react-native-oh-library/react-native-nested-scroll-view/releases) | [链接](/zh-cn/react-native-nested-scroll-view.md) | +| 155 | [react-native-nested-scroll-view](https://github.com/cesardeazevedo/react-native-nested-scroll-view) | 9.0.0 | 否 | [@react-native-oh-tpl/react-native-nested-scroll-view](https://github.com/react-native-oh-library/react-native-nested-scroll-view/releases) | [链接](/zh-cn/react-native-nested-scroll-view.md) +| 156 | [react-natice-code-push](https://github.com/react-native-oh-library/react-native-code-push) | 8.0.2 | 是 | [@react-native-oh-tpl/react-native-code-push](https://github.com/react-native-oh-library/react-native-code-push/releases) | [链接](/zh-cn/react-native-code-push.md) | | ## 社区 [Github Organization: react-native-oh-library](https://github.com/react-native-oh-library) diff --git a/zh-cn/react-native-community-segmented-control.md b/zh-cn/react-native-community-segmented-control.md index 1c6222a3..907663ba 100644 --- a/zh-cn/react-native-community-segmented-control.md +++ b/zh-cn/react-native-community-segmented-control.md @@ -1,8 +1,8 @@ -> 模板版本：v0.1.2 +> 模板版本：v0.2.2

-

react-native-community/segmented-control

+

@react-native-segmented-control/segmented-control

@@ -13,65 +13,76 @@

-> [!tip] [Github 地址](https://github.com/react-native-segmented-control/segmented-control) +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/segmented-control) ## 安装与使用 +请到三方库的 Releases 发布地址查看配套的版本信息：@react-native-oh-tpl/segmented-control Releases，并下载适用版本的 tgz 包。 + 进入到工程目录并输入以下命令： +> [!TIP] # 处替换为 tgz 包的路径 + #### **npm** ```bash -npm install @react-native-segmented-control/segmented-control@^2.5.0 +npm install @react-native-oh-tpl/segmented-control@file:# ``` #### **yarn** ```bash -yarn add @react-native-segmented-control/segmented-control@^2.5.0 +yarn add @react-native-oh-tpl/segmented-control@file:# ``` 下面的代码展示了这个库的基本使用场景： +> [!WARNING] 使用时 import 的库名不变。 + ```js +import React, { useState, useEffect } from "react"; import SegmentedControl from "@react-native-segmented-control/segmented-control"; -return ( - { - this.setState({ selectedIndex: event.nativeEvent.selectedSegmentIndex }); - }} - /> -); +const CustomValues = ["One", "Two"]; + +export const MSegmentedControl: React.FC = (): JSX.Element => { + + const [selectedIndex, setSelectedIndex] = useState(0); + + return { + setSelectedIndex(event.nativeEvent.selectedSegmentIndex); + }} + />; +} ``` ## 约束与限制 ### 兼容性 -在下述版本验证通过： +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -1. RNOH：0.72.11; SDK：OpenHarmony(api11) 4.1.0.53; IDE：DevEco Studio 4.1.3.412; ROM：2.0.0.52; -2. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.58; +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/segmented-control Releases](https://github.com/react-native-oh-library/segmented-control/releases) ## 属性 -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 详情见 [react-native-community/segmented-control 源库地址](https://github.com/react-native-segmented-control/segmented-control) -| Name | Description | Type | Required | Platform | HarmonyOS Support | Notes | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- | -------- | ------------ | ----------------- | -------------------------------------------------- | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- | | enabled | If false the user won't be able to interact with the control. Default value is true. | boolean | No | All | Yes | -| momentary | If true, then selecting a segment won't persist visually. The onValueChange callback will still work as expected. | boolean | No | iOS | No | Android和HarmonyOS侧,效果一致，不生效，iOS侧有效果 | +| momentary | If true, then selecting a segment won't persist visually. The onValueChange callback will still work as expected. | boolean | No | iOS | Yes | | onChange | Callback that is called when the user taps a segment; passes the event as an argument | function | No | All | Yes | | onValueChange | Callback that is called when the user taps a segment; passes the segment's value as an argument | function | No | All | Yes | | selectedIndex | The index in props.values of the segment to be (pre)selected. | number | No | All | Yes | @@ -79,11 +90,13 @@ return ( | backgroundColor | Background color color of the control. | string | No | All | Yes | | values | The labels for the control's segment buttons, in order. | string | Yes | All | Yes | | appearance | Overrides the control's appearance irrespective of the OS theme | 'dark', 'light' | No | All | Yes | -| fontStyle | An object container,color: color of segment;fontSize: font-size of segment text;fontFamily: font-family of segment text;fontWeight: font-weight of segment text | object | No | All | Yes | Android和HarmonyOS侧，fontFamily效果一致，均不生效 | -| activeFontStyle | An object container,color: overrides color of selected segment text;fontSize: overrides font-size of selected segment text;fontFamily: overrides font-family of selected segment text;fontWeight: overrides font-weight of selected segment text | object | No | All | Yes | Android和HarmonyOS侧，fontFamily效果一致，均不生效 | +| fontStyle | An object container,color: color of segment;fontSize: font-size of segment text;fontFamily: font-family of segment text;fontWeight: font-weight of segment text | object | No | All | Yes | +| activeFontStyle | An object container,color: overrides color of selected segment text;fontSize: overrides font-size of selected segment text;fontFamily: overrides font-family of selected segment text;fontWeight: overrides font-weight of selected segment text | object | No | All | Yes | | tabStyle | Styles the clickable surface which is responsible to change tabs | object | No | Android, Web | Yes | ## 遗留问题 +- [x] @react-native-segmented-control/segmented-control 的momentary属性未实现 HarmonyOS 化: [issue#868](https://github.com/react-native-segmented-control/segmented-control/issues/868) +- [x] @react-native-segmented-control/segmented-control 的fontFamily属性未实现 HarmonyOS 化: [issue#858](https://github.com/react-native-segmented-control/segmented-control/issues/858) ## 其他 -- Gitee