diff --git a/zh-cn/react-native-drop-shadow.md b/zh-cn/react-native-drop-shadow.md new file mode 100644 index 0000000000000000000000000000000000000000..d8970528e9576bb48b789e212232323d0810634a --- /dev/null +++ b/zh-cn/react-native-drop-shadow.md @@ -0,0 +1,151 @@ +> 模板版本:v0.2.0 + +

+

react-native-drop-shadow

+

+

+ + Supported platforms + + + License + + +

+ +> [!TIP] [Github 地址](https://github.com/hoanglam10499/react-native-drop-shadow) + +## 安装与使用 + + + +#### **npm** + +```bash +npm install react-native-drop-shadow@1.0.0 +``` + +#### **yarn** + +```bash +yarn add react-native-drop-shadow@1.0.0 +``` + + + +下面的代码展示了这个库的基本使用场景: + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import DropShadow from "react-native-drop-shadow"; +``` + +```js +export default function usage() { + return ( + + ... + + ); +} +``` + +### 与 FlatList 一起使用 + +```js +export default function withFlatList() { + return ( + "List-" + index} + CellRendererComponent={DropShadow} // <==== add line + renderItem={({ item, index }) => ( + + ... + + )} + /> + ); +} +``` + +### 与动画视图一起使用 +要使它代替 ,您需要用来创建 的可动画版本。例如:Animated.ViewAnimated.createAnimatedComponentDropShadow。 + +```js +const AnimatedDropShadow = Animated.createAnimatedComponent(DropShadow); + +export default function withAnimatedViews() { + return ( + + ... + + ); +} +``` +然后,您可以使用`AnimatedDropShadow`来代替`Animated.View` 。 + +### 局限性 +- Android 的位图限制为 2048x2048,但这可能取决于 API 版本。 +- 使用位图渲染来模拟阴影,如果同时渲染多个阴影和动画,则阴影可能会影响性能。 + +## 约束与限制 + +### 兼容性 + +本文档内容基于以下版本验证通过: + +react-native-harmony: 0.72.23; SDK: HarmonyOS NEXT Developer Beta1; IDE: DevEco Studio: 5.0.3.27; ROM: 3.0.0.19; + +## 属性 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| style | 设置阴影的样式,可以使用常规的样式属性 | style | no | Android/IOS | yes | +| shadowColor | 设置阴影的颜色,可以使用CSS颜色值或RGBA值 | string | no | Android/IOS | yes | +| shadowOffset | 设置阴影的偏移量 | number | no | Android/IOS | yes | +| shadowOpacity | 设置阴影的不透明度,取值范围为0到1之间,0表示完全透明,1表示完全不透明 | number | no | Android/IOS | yes | +| shadowRadius | 设置阴影的模糊半径,用于控制阴影的模糊程度 | number | no | Android/IOS | yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/hoanglam10499/react-native-drop-shadow/blob/master/LICENSE) ,请自由地享受和参与开源。 \ No newline at end of file diff --git a/zh-cn/react-native-flexi-radio-button.md b/zh-cn/react-native-flexi-radio-button.md new file mode 100644 index 0000000000000000000000000000000000000000..25c440b6f57543664c91e8acb746b8a387b75099 --- /dev/null +++ b/zh-cn/react-native-flexi-radio-button.md @@ -0,0 +1,176 @@ +> 模板版本:v0.2.0 + +

+

react-native-flexi-radio-button

+

+

+ + Supported platforms + + + License + + +

+ +> [!TIP] [Github 地址](https://github.com/thegamenicorus/react-native-flexi-radio-button) + +## 安装与使用 + + +#### **npm** + +```bash +npm i react-native-flexi-radio-button@0.2.2 +``` + +#### **yarn** + +```bash +yarn add react-native-flexi-radio-button@0.2.2 +``` + + + +下面的代码展示了这个库的基本使用场景: + +> [!WARNING] 使用时 import 的库名不变。 + +### Basic Example +[see full basic example](https://github.com/thegamenicorus/react-native-flexi-radio-button/blob/master/examples/BasicExample/app.js) + +|![basic_example_ios](https://cloud.githubusercontent.com/assets/21040043/18545904/67b5476e-7b65-11e6-8fc4-8160b39a4ab0.gif)|![basic_example_android](https://cloud.githubusercontent.com/assets/21040043/18545908/69b22f5a-7b65-11e6-87d7-c82c0d3057dd.gif)| +|---------------|----------| +```jsx + +import {RadioGroup, RadioButton} from 'react-native-flexi-radio-button' + +onSelect(index, value){ + this.setState({ + text: `Selected index: ${index} , value: ${value}` + }) +} + +render(){ + return( + + + this.onSelect(index, value)} + > + + This is item #1 + + + + This is item #2 + + + + This is item #3 + + + + {this.state.text} + + + ) +} +``` +### Custom Example +[see full custom example](https://github.com/thegamenicorus/react-native-flexi-radio-button/blob/master/examples/CustomExample/app.js) + +|![custom_ios](https://cloud.githubusercontent.com/assets/21040043/18546467/53bf8230-7b68-11e6-98f6-98899cce82b3.gif)|![cusom_android](https://cloud.githubusercontent.com/assets/21040043/18546744/cb912fce-7b69-11e6-9331-49e2337dcb04.gif)| +|---------------|----------| + + +modify in render() + +```jsx + this.onSelect(index, value)} +> + + + + + + Start from item index #1 + + + + Red Dot + + Green Dot + + + + Blue Dot + + +``` + +## 约束与限制 + +### 兼容性 + +本文档内容基于以下版本验证通过: + +react-native-harmony: 0.72.23; SDK: HarmonyOS NEXT Developer Beta1; IDE: DevEco Studio: 5.0.3.27; ROM: 3.0.0.19; + +## 属性 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。 + +##### Radio Group: +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| size | 单选按钮的大小 | number | no | Android/IOS | yes | +| thickness | 单选按钮边框的宽度 | number | no | Android/IOS | yes | +| color | 单选按钮的颜色 | string | no | Android/IOS | yes | +| activeColor | 选择时单选按钮的颜色 | string | no | Android/IOS | yes | +| highlightColor | 选择后单选按钮的背景 | string | no | Android/IOS | yes | +| selectedIndex | 单选组的默认选择索引,可以更改为新值或空值以进行明确选择 | number | no | Android/IOS | yes | +| style | 如果提供,则要应用的自定义样式 | object | no | Android/IOS | yes | +| onSelect | 选择单选按钮时要调用的函数 | function(index, value) | no | Android/IOS | yes | + +##### Radio Button: + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| value | value 将在回调时作为第二个参数传递onSelect | any | no | Android/IOS | yes | +| style | 要应用于“RadioButton”组件的样式 | object | no | Android/IOS | yes | +| color | 按钮颜色 | string | no | Android/IOS | yes | +| disabled | 如果为 true,则禁用此组件的所有交互 | bool | no | Android/IOS | yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/thegamenicorus/react-native-flexi-radio-button/blob/master/LICENSE) ,请自由地享受和参与开源。 diff --git a/zh-cn/react-native-localize.md b/zh-cn/react-native-localize.md new file mode 100644 index 0000000000000000000000000000000000000000..051820c7bc43b95bf0fb67cbf629919d6c0a90cc --- /dev/null +++ b/zh-cn/react-native-localize.md @@ -0,0 +1,255 @@ +> 模板版本:v0.2.0 + +

+

react-native-localize

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github 地址](https://github.com/zoontek/react-native-localize) + + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息:[<@react-native-oh-tpl/react-native-localize> Releases] +(https://github.com/react-native-oh-library/react-native-localize/releases),并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令: + +>[!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-localize@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-localize@file:# +``` + + + +下面的代码展示了这个库的基本使用场景: + +>[!WARNING] 使用时 import 的库名不变。 + +```js +import * as React from "react"; +import { + I18nManager, + Platform, + SafeAreaView, + ScrollView, + StyleSheet, + Text, + View, +} from "react-native"; +import * as RNLocalize from "react-native-localize"; + +const Line = ({ name, value }: { name: string; value: unknown }) => ( + + {name} + {JSON.stringify(value, null, 2)} + +); +function LocalizeDemo() { + return ( + + + + + + + + + + + + + + + + + + ); +} +export default LocalizeDemo; +``` + +## Link + +目前鸿蒙暂不支持 AutoLink,所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` + +### 引入原生端代码 + +目前有两种方法: + +1. 通过 har 包引入(在 IDE 完善相关功能后该方法会被遗弃,目前首选此方法); +2. 直接链接源码。 + +方法一:通过 har 包引入 + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`,添加以下依赖 + +```json +"dependencies": { + "rnoh": "file:../react_native_openharmony", + "rnoh-localize": "file:../../node_modules/@react-native-oh-tpl/react-native-localize/harmony/rn_localize.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行: + +```bash +cd entry +ohpm install +``` + +方法二:直接链接源码 + +> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`,添加以下依赖 + +```json +"dependencies": { + "rnoh": "file:../react_native_openharmony", + "rnoh-localize": "file:../../node_modules/@react-native-oh-tpl/react-native-localize/harmony/rn_localize" + } +``` + +打开终端,执行: + +```bash +cd entry +ohpm install --no-link +``` + +### 配置 CMakeLists + +打开 `entry/src/main/cpp/CMakeLists.txt`,添加: + +```diff +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_DIR "${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_MODULE_DIR}/rnoh-localize/src/main/cpp" ./rn-localize) +# 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_localize) +# RNOH_END: manual_package_linking_2 +``` + +### 在 ArkTs 侧引入 RNKeepAwakePackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`,添加: + +```diff +... ++ import { RNLocalizePackage } from "rnoh-localize/ts"; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new RNLocalizePackage(ctx) + ]; +} +``` + +### 运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行: + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 +要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 电脑ROM。 + +本文档内容基于以下版本验证通过: + +1. RNOH:0.72.20; SDK:HarmonyOS NEXT Developer Preview2; IDE:DevEco Studio 5.0.3.200; ROM:205.0.0.18 + +## 方法 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。 + + +| Name | Description | Required | Platform | HarmonyOS Support | +| ---------------------- | ---------------------------------------------- | -------- |----------|-------------------| +| getLocales() | Returns the user preferred locales, in order. | No | All | yes | +| etNumberFormatSettings() | Returns number formatting settings. | No | All | yes | +| getCurrencies() | Returns the user preferred currency codes, in order. | No | All | yes | +| getCountry() | Returns the user current country code (based on its device locale, not on its position). | No | All | yes | +| getCalendar() | Returns the user preferred calendar format. | No | All | yes | +| getTemperatureUnit() | Returns the user preferred temperature unit. | No | All | No | +| getTimeZone() | Returns the user preferred timezone (based on its device settings, not on its position). | No | All | yes | +| uses24HourClock() | Returns true if the user prefers 24h clock format, false if they prefer 12h clock format. | No | All | yes | +| usesMetricSystem() | Returns true if the user prefers metric measure system, false if they prefer imperial. | No | All | No | +| usesAutoDateAndTime() | Tells if the automatic date & time setting is enabled on the phone. Android only | No | Android | No | +| usesAutoTimeZone() | Tells if the automatic time zone setting is enabled on the phone. Android only | No | Android | No | + + +## 遗留问题 +- [ ] 鸿蒙侧无法获取温度及长度单位[issue#2](https://github.com/react-native-oh-library/react-native-localize/issues/2) + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/zoontek/react-native-localize/blob/main/LICENSE) ,请自由地享受和参与开源。 \ No newline at end of file diff --git a/zh-cn/react-native-switch-pro.md b/zh-cn/react-native-switch-pro.md new file mode 100644 index 0000000000000000000000000000000000000000..d44452b10ce08690a822799b4bcb9c13001f2792 --- /dev/null +++ b/zh-cn/react-native-switch-pro.md @@ -0,0 +1,115 @@ +> 模板版本:v0.2.0 + +

+

react-native-switch-pro

+

+

+ + Supported platforms + + + License + + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-switch-pro) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息:[@react-native-oh-tpl/react-native-switch-pro Releases](https://github.com/react-native-oh-library/react-native-switch-pro/releases),并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令: + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-switch-pro@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-switch-pro@file:# +``` + + + +下面的代码展示了这个库的基本使用场景: + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import Switch from 'react-native-switch-pro' +... + render() { + return ( + + {...}}/> + + ) + } +... + +``` +## 约束与限制 + +### 兼容性 + +要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息:[@react-native-oh-tpl/react-native-switch-pro Releases](https://github.com/react-native-oh-library/react-native-switch-pro/releases) + +本文档内容基于以下版本验证通过: + +react-native-harmony: 0.72.23; SDK: HarmonyOS NEXT Developer Beta1; IDE: DevEco Studio: 5.0.3.27; ROM: 3.0.0.19; + +## 属性 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| width| width of switch | number | no | Android/IOS | yes | +| height | height of switch | number | no | Android/IOS | yes | +| value | state of switch which can be used to bidirectional binding | bool | no | Android/IOS | yes | +| disabled | whether switch is clickable | bool | no | Android/IOS | yes | +| circleColorActive | color for circle handler of switch when it is on | string | no | Android/IOS | yes | +| circleColorInactive | color for circle handler of switch when it is off | string | no | Android/IOS | yes | +| style | styles that will be applied for switch container | style | no | Android/IOS | yes | +| circleStyle | styles that will be applied for the circle | style | no | Android/IOS | yes | +| backgroundActive | color of switch when it is on | string | no | Android/IOS | yes | +| backgroundInactive | color of switch when it is of | string | no | Android/IOS | yes | +| onSyncPress | callback when switch is clicked | func | no | Android/IOS | yes | +| onAsyncPress | has a callback with result of async | func | no | Android/IOS | yes | + + +## Notice +* 你最好不要一起使用 和 否则,只会被调用。onSyncPressonAsyncPressonSyncPress + +* value与双向绑定一起使用,可以是 redux、state 等。 +在 中,您应该写如下(带有状态):onAsyncPress + + ```javascript + { + callback(false or true, value => this.setState({value})) + }} + /> + ``` + `value => this.setState({value})仅当 result 为 true 时才会调用。 + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/poberwong/react-native-switch-pro/blob/master/LICENSE) ,请自由地享受和参与开源。 \ No newline at end of file