From dfcc05e1fd62a99f864653a326970d715b579c66 Mon Sep 17 00:00:00 2001
From: huangzongzheng <1518931313@qq.com>
Date: Mon, 29 Jul 2024 11:18:39 +0800
Subject: [PATCH 1/2] =?UTF-8?q?docs:=20[Issues:=20#IAD81M]=E6=96=B0?=
=?UTF-8?q?=E5=A2=9Ereact-native-securerandom=20=E6=8C=87=E5=AF=BC?=
=?UTF-8?q?=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
zh-cn/react-native-securerandom.md | 193 +++++++++++++++++++++++++++++
1 file changed, 193 insertions(+)
create mode 100644 zh-cn/react-native-securerandom.md
diff --git a/zh-cn/react-native-securerandom.md b/zh-cn/react-native-securerandom.md
new file mode 100644
index 00000000..9fa28123
--- /dev/null
+++ b/zh-cn/react-native-securerandom.md
@@ -0,0 +1,193 @@
+
+> 模板版本：v0.2.2
+
+
+
react-native-securerandom
+
+
+
+ 
+
+
+ 
+
+
+
+
+> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-securerandom)
+
+## 安装与使用
+
+请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-library/react-native-securerandom Releases](https://github.com/react-native-oh-library/react-native-securerandom/releases)，并下载适用版本的 tgz 包。
+
+进入到工程目录并输入以下命令：
+
+>[!TIP] # 处替换为 tgz 包的路径
+
+
+
+#### npm
+
+```bash
+npm install @react-native-oh-tpl/react-native-securerandom@file:#
+```
+
+#### yarn
+
+```bash
+yarn add @react-native-oh-tpl/react-native-securerandom@file:#
+```
+
+
+
+下面的代码展示了这个库的基本使用场景：
+
+>[!WARNING] 使用时 import 的库名不变。
+
+```tsx
+
+import React, { useState } from "react";
+import { Text, TouchableOpacity, View, TextInput, StyleSheet } from 'react-native';
+import { generateSecureRandom } from 'react-native-securerandom';
+
+export default function secureRandomDemo(): JSX.Element {
+
+ const [secureRandom, setSecureRandom] = useState('')
+ const [size, setSize] = useState('30');
+
+ return
+
+ {secureRandom}
+
+
+ {
+ setSize(s);
+ }}>
+ {
+ generateSecureRandom(Number(size)).then((myRandom:any) => {
+ setSecureRandom(`${JSON.stringify(myRandom?.data)}`)
+ }).catch((err)=>{
+ console.log(err,'err')
+ })
+ }} style={styles.btn}>
+
+ secureRandom
+
+
+
+}
+const styles = StyleSheet.create({
+ TextInput: { height: 40, borderColor: '#ccc', borderWidth: 1, borderRadius: 4, width: '90%' },
+ btn: { borderRadius: 10, display: 'flex', justifyContent: 'center', alignItems: 'center', padding: 10, margin: 10, backgroundColor: 'blue' },
+ btnText: { fontWeight: 'bold', color: '#fff', fontSize: 20 }
+});
+```
+
+## Link
+
+目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。
+
+首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony`
+
+### 在工程根目录的 `oh-package.json` 添加 overrides字段
+
+```json
+{
+ ...
+ "overrides": {
+ "@rnoh/react-native-openharmony" : "./react_native_openharmony"
+ }
+}
+```
+
+### 引入原生端代码
+
+目前有两种方法：
+
+1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
+2. 直接链接源码。
+
+方法一：通过 har 包引入(推荐)
+
+> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。
+
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
+ "@react-native-oh-tpl/react-native-securerandom": "file:../../node_modules/@react-native-oh-tpl/react-native-securerandom/harmony/secure_random.har"
+ }
+```
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+方法二：直接链接源码
+
+> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md)
+
+### 在 ArkTs 侧引入 SecureRandomPackage
+
+打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+
+```diff
+ ...
++ import { SecureRandomPackage } from '@react-native-oh-tpl/react-native-secure_random/ts';
+
+export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
+ return [
+ new SamplePackage(ctx),
++ new SecureRandomPackage(ctx)
+ ];
+}
+```
+
+### 运行
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+然后编译、运行即可。
+
+## 约束与限制
+
+### 兼容性
+
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/react-native-securerandom Releases](https://github.com/react-native-oh-library/react-native-securerandom/releases)
+
+
+## API
+
+> [!Tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!Tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+|----------------|-------------------------------| -- | -------- | ----------- | ----------------- |
+| securerandom | A library to generate cryptographically-secure random byte. | function | No | ios/Android | yes |
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/robhogan/react-native-securerandom/blob/main/LICENSE) ，请自由地享受和参与开源。
+
+
+
\ No newline at end of file
--
Gitee
From 2187605536117b1b68c2d3bf74b31a58f341a379 Mon Sep 17 00:00:00 2001
From: huangzongzheng <1518931313@qq.com>
Date: Mon, 29 Jul 2024 18:29:51 +0800
Subject: [PATCH 2/2] =?UTF-8?q?docs:=20[Issues:=20#IAGCY7]=E6=96=B0?=
=?UTF-8?q?=E5=A2=9Ereact-native-community-hooks=20=E6=8C=87=E5=AF=BC?=
=?UTF-8?q?=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
zh-cn/react-native-community-hooks.md | 309 ++++++++++++++++++++++++++
1 file changed, 309 insertions(+)
create mode 100644 zh-cn/react-native-community-hooks.md
diff --git a/zh-cn/react-native-community-hooks.md b/zh-cn/react-native-community-hooks.md
new file mode 100644
index 00000000..a77b650d
--- /dev/null
+++ b/zh-cn/react-native-community-hooks.md
@@ -0,0 +1,309 @@
+
+> 模板版本：v0.2.2
+
+
+
react-native-community-hooks
+
+
+
+
+
+
+ 
+
+
+
+
+> [!TIP] [Github 地址](https://github.com/react-native-community/hooks)
+
+## 安装与使用
+
+进入到工程目录并输入以下命令：
+
+
+
+#### npm
+
+```bash
+npm install @react-native-community/hooks@0.2.2
+```
+
+#### yarn
+
+```bash
+yarn add @react-native-community/hooks@0.2.2
+```
+
+
+
+下面的代码展示了这个库的基本使用场景：
+
+>[!WARNING] 使用时 import 的库名不变。
+
+```tsx
+
+import React, { useState, useEffect } from 'react';
+import {
+ Text,
+ Image,
+ TouchableOpacity,
+ View,
+ TextInput,
+ ScrollView,
+ StyleSheet,
+ RefreshControl
+} from 'react-native';
+import { useImageDimensions, useAppState, useLayout, useKeyboard, useDeviceOrientation, useBackHandler, useRefresh, useAccessibilityInfo } from '@react-native-community/hooks'
+export const HooksTest = () => {
+ const {
+ boldTextEnabled,
+ screenReaderEnabled,
+ reduceMotionEnabled, // requires RN60 or newer
+ grayscaleEnabled, // requires RN60 or newer
+ invertColorsEnabled, // requires RN60 or newer
+ reduceTransparencyEnabled, // requires RN60 or newer
+ } = useAccessibilityInfo()
+ const [backText, setBackText] = useState('')
+ const [refreshText, setRefreshText] = useState('下拉刷新')
+ const fetch = () => {
+ return new Promise((resolve) => setTimeout(() => { resolve(setRefreshText('刷新成功')) }, 500))
+ }
+ const { isRefreshing, onRefresh } = useRefresh(fetch);
+ const source = require('../img/pravatar-131.jpg')
+ const { dimensions, loading, error } = useImageDimensions(source)
+ const { onLayout, ...layout } = useLayout()
+ const [isBoldTextEnabled, setIsBoldTextEnabled] = useState(false)
+ const [isscreenReaderEnabled, setIsscreenReaderEnabled] = useState(false)
+ const [isReduceMotionEnabled, setIsReduceMotionEnabled] = useState(false)
+ const [isGrayscaleEnabled, setIsGrayscaleEnabled] = useState(false)
+ const [isInvertColorsEnabled, setIsInvertColorsEnabled] = useState(false)
+ const [isReduceTransparencyEnabled, setIsReduceTransparencyEnabled] = useState(false)
+ const useBackHandlerClick = (type: boolean) => {
+ type ? setBackText('返回中断') : setBackText('')
+ }
+ useBackHandler(() => {
+ if (backText) {
+ return true
+ }
+ // false 返回 true:中断返回
+ return false
+ })
+ let clearUseAccessibilityInfo = setTimeout(() => {
+ setIsBoldTextEnabled(boldTextEnabled)
+ setIsscreenReaderEnabled(screenReaderEnabled)
+ setIsReduceMotionEnabled(reduceMotionEnabled)
+ setIsGrayscaleEnabled(grayscaleEnabled)
+ setIsInvertColorsEnabled(invertColorsEnabled)
+ setIsReduceTransparencyEnabled(reduceTransparencyEnabled)
+ },1000)
+ useEffect(() => {
+ return clearTimeout(clearUseAccessibilityInfo)
+ },[])
+ return (
+
+
+ }>
+ {/* hooks-useAccessibilityInfo-demo */}
+
+ boldTextEnabled: {`${isBoldTextEnabled}`}
+ screenReaderEnabled: {`${isscreenReaderEnabled}`}
+ reduceMotionEnabled: {`${isReduceMotionEnabled}`}
+ grayscaleEnabled: {`${isGrayscaleEnabled}`}
+ invertColorsEnabled: {`${isInvertColorsEnabled}`}
+ reduceTransparencyEnabled: {`${isReduceTransparencyEnabled}`}
+
+
+ {/* hooks-useRefresh-demo */}
+
+ {refreshText}
+
+ {/* hooks-useBackHandler-demo */}
+
+ {backText}
+ useBackHandlerClick(false)}
+ style={styles.useBackHandlerBtn}>
+ useBackHandler (false)
+
+ useBackHandlerClick(true)}
+ style={styles.useBackHandlerBtn}>
+ useBackHandler (true)
+
+
+ {/* hooks-useDeviceOrientation-demo */}
+
+ 判断是横屏(landscape)还是纵屏(portrait)：{useDeviceOrientation()}
+
+ {/* hooks-useImageDimensions-demo */}
+
+ {
+ (loading || error || !dimensions) ? 失败 :
+
+
+
+ }
+ 返回图片宽高的比列,高,宽：{JSON.stringify(dimensions)}
+
+ {/* hooks-useAppState-demo */}
+
+ 返回应用程序状态：{useAppState()}
+ 状态有： "active" | "background" | "inactive" | "unknown" | "extension"
+
+ {/* hooks-useLayout-demo */}
+
+ 返回元素的坐标和宽高 : {JSON.stringify(layout)}
+
+ {/* hooks-useKeyboard-demo */}
+
+
+ 返回键盘收起状态，和键盘相关信息{JSON.stringify(useKeyboard())}
+
+
+
+ );
+}
+const styles = StyleSheet.create({
+ useBackHandlerBtn: {
+ borderRadius: 6,
+ height: 36,
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ margin: 10,
+ backgroundColor: 'rgb(61, 176, 236)',
+ },
+ TextInput: {
+ height: 40,
+ borderColor: '#fff',
+ borderWidth: 1,
+ borderRadius: 4,
+ width: '90%',
+ backgroundColor: '#fff'
+ },
+ btnText: { fontWeight: 'bold', color: '#fff', fontSize: 20 },
+});
+
+```
+
+```tsx
+import React, { useState, useEffect } from "react";
+import {
+ Alert,
+ Animated,
+ Platform,
+ StyleSheet,
+ Text,
+ View,
+} from "react-native";
+import { useInteractionManager } from '@react-native-community/hooks'
+const instructions = Platform.select({
+ ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
+ android:
+ "Double tap R on your keyboard to reload,\n" +
+ "Shake or press menu button for dev menu",
+});
+const useMount = (func: Function) => useEffect(() => func(), []);
+
+const useFadeIn = (duration = 3500) => {
+ const [opacity] = useState(new Animated.Value(0));
+ useMount(() => {
+ Animated.timing(opacity, {
+ toValue: 1,
+ duration,
+ } as any).start();
+ });
+
+ return opacity;
+};
+
+const Ball = ({ onShown }: any) => {
+ const opacity = useFadeIn();
+ const interactionReady = useInteractionManager()
+ console.log('interactionReady', interactionReady)
+ useEffect(() => {
+ if (interactionReady) {
+ onShown()
+ }
+ },[interactionReady]);
+ return ;
+};
+
+export const _useInteractionManager = () => {
+ return (
+
+ {instructions}
+ Alert.alert("Animation is done")} />
+
+ );
+};
+const styles = StyleSheet.create({
+ container: { flex: 1, justifyContent: "center", alignItems: "center" },
+ ball: {
+ width: 100,
+ height: 100,
+ backgroundColor: "salmon",
+ borderRadius: 100,
+ },
+});
+
+```
+
+## 约束与限制
+
+### 兼容性
+
+1.RNOH: 0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.25; IDE：DevEco Studio 5.0.3.400SP7; ROM：3.0.0.25;
+
+
+## API
+
+> [!Tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!Tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+|----------------|-------------------------------| -- | -------- | ----------- | ----------------- |
+| useAccessibilityInfo | Check whether some configurations of the device are enabled.See useAccessibilityInfo Api | Function | False | Android / Ios | Yes |
+| useAppState | Tells you whether the application is in the foreground or background | Function | False | Android / Ios | Yes |
+| useBackHandler | Used to listen for the back button event on the device. You can call your own function to handle the back behavior. | Function | False | Android / Ios | Yes |
+| useImageDimensions | Used to listen for the back button event on the device. You can call your own function to handle the back behavior. | Function | False | Android / Ios | Yes |
+| useKeyboard | Return whether the keyboard is invoked and the keyboard width and height. | Function | False | Android / Ios | Yes |
+| useInteractionManager | Schedule some of the more time-consuming tasks for after all the interactions or animations have been completed. | Function | False | Android / Ios | Yes |
+| useDeviceOrientation | Check whether the device is in landscape or portrait mode. | Function | False | Android / Ios | Yes |
+| useLayout | Returns the x-axis and y-axis coordinates of an element and the width and height of the element. | Function | False | Android / Ios | Yes |
+| useRefresh | pull down to refresh. | Function | False | Android / Ios | Yes |
+
+useAccessibilityInfo Api
+| Name | Description | Platform | HarmonyOS Support |
+|----------------|-------------------------------| -------- | ----------------- |
+| isBoldTextEnabled | whether bold text is enabled | Ios | Yes |
+| isScreenReaderEnabled | Whether the Screen Reading Function Is Enabled | Android / Ios | No |
+| isGrayscaleEnabled | Whether grayscale mode is enabled | Ios | Yes |
+| isInvertColorsEnabled | Whether color inversion is enabled | Ios | Yes |
+| isReduceMotionEnabled | Whether reduction animation is enabled | Android / Ios | Yes |
+| isReduceTransparencyEnabled | Whether reduce transparency is enabled | Ios | Yes |
+## 其他
+
+## 开源协议
+
+本项目基于 [The ISC License (ISC)](https://github.com/react-native-community/hooks/blob/main/LICENSE) ，请自由地享受和参与开源。
+
+
+
\ No newline at end of file
--
Gitee