From 3be83dd1f24fe7967e0db5f8f36a15f46e4d9f9a Mon Sep 17 00:00:00 2001
From: dongzhihan <dongzhihan@h-partners.com>
Date: Mon, 5 Aug 2024 18:45:32 +0800
Subject: [PATCH 1/2] =?UTF-8?q?docs:=20[Issues:=20#IAHY78]=20=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9react-navigation-header-buttons=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-navigation-header-buttons.md | 232 ++++++++++++-----------
 1 file changed, 126 insertions(+), 106 deletions(-)

diff --git a/zh-cn/react-navigation-header-buttons.md b/zh-cn/react-navigation-header-buttons.md
index 489a9a69..fcda4100 100644
--- a/zh-cn/react-navigation-header-buttons.md
+++ b/zh-cn/react-navigation-header-buttons.md
@@ -18,6 +18,7 @@
 ## 安装与使用
 
 <!-- tabs:start -->
+
 进入到工程目录并输入以下命令：
 
 #### **npm**
@@ -32,8 +33,8 @@ npm i react-navigation-header-buttons@12.0.0
 yarn add react-navigation-header-buttons@12.0.0
 ```
 
+在 tsconfig.json 文件中添加如下代码:
 
-在tsconfig.json文件中添加如下代码:
 ```json
 "compilerOptions": {
   ...
@@ -46,7 +47,9 @@ yarn add react-navigation-header-buttons@12.0.0
   }
 
 ```
-在metro.config.js文件中添加如下代码:
+
+在 metro.config.js 文件中添加如下代码:
+
 ```js
 const config = {
 ...
@@ -67,61 +70,101 @@ module.exports = mergeConfig(
 
 > [!WARNING] 使用时 import 的库名不变。
 
+此示例 demo 依赖以下三方库，请查看对应文档：
+
+- [@react-navigation/stack](/zh-cn/react-navigation-stack.md)
+- [@react-navigation/native](/zh-cn/react-navigation-native.md)
+
 ```js
-import * as React from 'react';
-import MaterialIcons from '@expo/vector-icons/MaterialIcons';
+import * as React from "react";
+import { Button, View, Text, Alert } from "react-native";
+import { NavigationContainer } from "@react-navigation/native";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import { HeaderButtonsProvider } from "react-navigation-header-buttons/HeaderButtonsProvider";
 import {
   HeaderButtons,
   Item,
-  HiddenItem,
-  OverflowMenu,
-  Divider,
-  ItemProps,
-  HiddenItemProps,
   HeaderButtonProps,
-  HeaderButton,
-} from 'react-navigation-header-buttons';
-import { Text } from 'react-native';
-
-const MaterialHeaderButton = (props: HeaderButtonProps) => (
-  <HeaderButton IconComponent={MaterialIcons} iconSize={23} {...props} />
-);
-
-const EditItem = ({ onPress }: Pick<ItemProps, 'onPress'>) => {
-  return <Item title="edit" onPress={onPress} />;
-};
-
-const ReusableHiddenItem = ({ onPress }: Pick<HiddenItemProps, 'onPress'>) => (
-  <HiddenItem title="hidden2" onPress={onPress} disabled />
-);
-
-export function UsageWithIcons({ navigation }) {
+  OverflowMenu,
+  HiddenItem,
+} from "react-navigation-header-buttons";
+
+const stackType = "native";
+const Stack = createNativeStackNavigator();
+
+function HeaderButtonsTester({ navigation }) {
+  const MaterialHeaderButton = (props: HeaderButtonProps) => {
+    return (
+      <View>
+        <Text>{props.title}</Text>
+      </View>
+    );
+  };
   React.useLayoutEffect(() => {
     navigation.setOptions({
-      title: 'Demo',
+      title: "导航栏",
       headerRight: () => (
         <HeaderButtons HeaderButtonComponent={MaterialHeaderButton}>
-          <Item
-            title="search"
-            iconName="search"
-            onPress={() => alert('search')}
-          />
-          <EditItem onPress={() => alert('Edit')} />
-          <OverflowMenu
-            OverflowIcon={({ color }) => (
-              <MaterialIcons name="more-horiz" size={23} color={color} />
-            )}
-          >
-            <HiddenItem title="hidden1" onPress={() => alert('hidden1')} />
-            <Divider />
-            <ReusableHiddenItem onPress={() => alert('hidden2')} />
+          <Item title="this is a item" />
+          <OverflowMenu OverflowIcon={() => <Text>Icon</Text>}>
+            <HiddenItem
+              title="hidden1"
+              onPress={() => Alert.alert("hidden1")}
+            />
+            <HiddenItem
+              title="hidden2"
+              onPress={() => Alert.alert("hidden2")}
+            />
           </OverflowMenu>
         </HeaderButtons>
       ),
     });
   }, [navigation]);
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <Text>
+        HeaderButton默认渲染按钮的组件
+        HeaderButtonComponent中可以接收来自Item中的props
+      </Text>
+    </View>
+  );
+}
+function HomePage({ navigation }) {
+  return (
+    <View style={{ backgroundColor: "#fff" }}>
+      <Button
+        title="HeaderButtonDemo"
+        onPress={() => {
+          navigation.navigate("HeaderButtonsTester");
+        }}
+      />
+    </View>
+  );
+}
 
-  return <Text>demo!</Text>;
+export default function HeaderButtonExample() {
+  return (
+    <NavigationContainer>
+      <HeaderButtonsProvider stackType={stackType}>
+        <Stack.Navigator initialRouteName="react-navigation-header-buttons">
+          <Stack.Screen
+            name="react-navigation-header-buttons"
+            component={HomePage}
+          />
+          <Stack.Screen
+            name="HeaderButtonsTester"
+            component={HeaderButtonsTester}
+          />
+        </Stack.Navigator>
+      </HeaderButtonsProvider>
+    </NavigationContainer>
+  );
 }
 ```
 
@@ -131,95 +174,72 @@ export function UsageWithIcons({ navigation }) {
 
 本文档内容基于以下版本验证通过：
 
-1. RNOH：0.72.26; SDK：HarmonyOS NEXT Developer Beta1 5.0.0.25; IDE：DevEco Studio 5.0.3.300SP2; ROM:3.0.0.24(Canary3);
+1. RNOH：0.72.27; SDK：HarmonyOS NEXT Developer Beta1 5.0.0.25; IDE：DevEco Studio 5.0.3.400SP7; ROM:3.0.0.25;
 
 ## 属性
 
-### HeaderButtons
-
 > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。
 
 > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
 
+### HeaderButtons
 
-
-| Name            | Description     | Type                                                                                                                     | Required | Platform | HarmonyOS Support    | 
-| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- | ----------- | 
-| HeaderButtonComponent            | component that renders the buttons, HeaderButton by default  |`ComponentType`| no   | iOS/Android       | yes | 
-| children            | 	whatever you want to render inside  |`ReactNode`| yes   | iOS/Android       | yes | 
-| left            | 	whether the HeaderButtons are on the left from header title  |boolean| no   | iOS/Android       | yes | 
-| preset            | headers are typically rendered in Stack Navigator, however, you can also render them in a Tab Navigator header. Pass 'tabHeader' if button margins are missing.  |`’tabHeader’/‘stackHeader’`| no   | iOS/Android       | yes | 
-
-
+| Name                  | Description                                                                                                                                                     | Type                        | Required | Platform    | HarmonyOS Support |
+| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | -------- | ----------- | ----------------- |
+| HeaderButtonComponent | component that renders the buttons, HeaderButton by default                                                                                                     | `ComponentType`             | no       | iOS/Android | yes               |
+| children              | whatever you want to render inside                                                                                                                              | `ReactNode`                 | yes      | iOS/Android | yes               |
+| left                  | whether the HeaderButtons are on the left from header title                                                                                                     | boolean                     | no       | iOS/Android | yes               |
+| preset                | headers are typically rendered in Stack Navigator, however, you can also render them in a Tab Navigator header. Pass 'tabHeader' if button margins are missing. | `’tabHeader’/‘stackHeader’` | no       | iOS/Android | yes               |
 
 ### Item
 
-> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。
-
-> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
-
-
-
-| Name            | Description     | Type                                                                                                                     | Required | Platform | HarmonyOS Support    | 
-| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- | ----------- | 
-| title            | 	title for the button, required  |string| no   | iOS/Android       | yes | 
-| onPress            | 	function to call on press |function| no   | iOS/Android       | yes | 
-| iconName            | 	icon name, used together with the IconComponent prop  |string| no   | iOS/Android       | yes | 
-| style            | style to apply to the touchable element that wraps the button  |` ViewStyle`| no   | iOS/Android       | yes | 
-| buttonStyle            | style to apply to the text / icon |` ViewStyle`| no   | iOS/Android       | yes | 
+| Name        | Description                                                   | Type         | Required | Platform    | HarmonyOS Support |
+| ----------- | ------------------------------------------------------------- | ------------ | -------- | ----------- | ----------------- |
+| title       | title for the button, required                                | string       | no       | iOS/Android | yes               |
+| onPress     | function to call on press                                     | function     | no       | iOS/Android | yes               |
+| iconName    | icon name, used together with the IconComponent prop          | string       | no       | iOS/Android | yes               |
+| style       | style to apply to the touchable element that wraps the button | ` ViewStyle` | no       | iOS/Android | yes               |
+| buttonStyle | style to apply to the text / icon                             | ` ViewStyle` | no       | iOS/Android | yes               |
 
 ### OverflowMenu
 
-> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。
-
-> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
-
-
-
-| Name            | Description     | Type                                                                                                                     | Required | Platform | HarmonyOS Support    | 
-| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- | ----------- | 
-| OverflowIcon            | React element or component for the overflow icon  |` ReactElement / ComponentType`| no   | iOS/Android       | yes | 
-| style            | 	optional styles for overflow button|`ViewStyle`| no   | iOS/Android       | yes | 
-| onPress            | 	function that is called when overflow menu is pressed.  |function| no   | iOS/Android       | yes | 
-| left              | whether the OverflowMenu is on the left from header title |boolean| no   | iOS/Android       | yes |
-| children              | the overflow items|`ReactNode`| yes   | iOS/Android       | yes |
-| preset              |	headers are typically rendered in Stack Navigator, however, you can also render them in a Tab Navigator header. Pass 'tabHeader' if button margins are missing. |` 'tabHeader' / 'stackHeader'`| no   | iOS/Android       | yes |
+| Name         | Description                                                                                                                                                     | Type                            | Required | Platform    | HarmonyOS Support |
+| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | -------- | ----------- | ----------------- |
+| OverflowIcon | React element or component for the overflow icon                                                                                                                | ` ReactElement / ComponentType` | no       | iOS/Android | yes               |
+| style        | optional styles for overflow button                                                                                                                             | `ViewStyle`                     | no       | iOS/Android | yes               |
+| onPress      | function that is called when overflow menu is pressed.                                                                                                          | function                        | no       | iOS/Android | yes               |
+| left         | whether the OverflowMenu is on the left from header title                                                                                                       | boolean                         | no       | iOS/Android | yes               |
+| children     | the overflow items                                                                                                                                              | `ReactNode`                     | yes      | iOS/Android | yes               |
+| preset       | headers are typically rendered in Stack Navigator, however, you can also render them in a Tab Navigator header. Pass 'tabHeader' if button margins are missing. | ` 'tabHeader' / 'stackHeader'`  | no       | iOS/Android | yes               |
 
 ### HiddenItem
 
-> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。
-
-> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
-
-
-
-| Name            | Description     | Type                                                                                                                     | Required | Platform | HarmonyOS Support    | 
-| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- | ----------- | 
-| title            |title for the button, required  |string| no   | iOS/Android       | yes | 
-| style            | style to apply to the touchable element that wraps the text|`ViewStyle`| no   | iOS/Android       | yes | 
-| titleStyle            | style to apply to the text |`TextStyle`| no   | iOS/Android       | yes | 
-| onPress            |function to call on press  |function| no   | iOS/Android       | yes | 
-| disabled              | disabled 'item' is greyed out and onPress is not called on touch |boolean| no   | iOS/Android       | yes |
-
+| Name       | Description                                                      | Type        | Required | Platform    | HarmonyOS Support |
+| ---------- | ---------------------------------------------------------------- | ----------- | -------- | ----------- | ----------------- |
+| title      | title for the button, required                                   | string      | no       | iOS/Android | yes               |
+| style      | style to apply to the touchable element that wraps the text      | `ViewStyle` | no       | iOS/Android | yes               |
+| titleStyle | style to apply to the text                                       | `TextStyle` | no       | iOS/Android | yes               |
+| onPress    | function to call on press                                        | function    | no       | iOS/Android | yes               |
+| disabled   | disabled 'item' is greyed out and onPress is not called on touch | boolean     | no       | iOS/Android | yes               |
 
 ### HeaderButton
 
-> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。
+| Name         | Description                                                                                    | Type        | Required | Platform    | HarmonyOS Support |
+| ------------ | ---------------------------------------------------------------------------------------------- | ----------- | -------- | ----------- | ----------------- |
+| title        | title for the button, required                                                                 | string      | no       | iOS/Android | yes               |
+| style        | style to apply to the touchable element that wraps the text                                    | `ViewStyle` | no       | iOS/Android | yes               |
+| onPress      | function to call on press                                                                      | function    | no       | iOS/Android | yes               |
+| renderButton | You can fully customize what it renders inside of the PlatformPressable using the renderButton | ReactNode   | no       | iOS/Android | yes               |
 
-> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
-
-
-
-| Name            | Description     | Type                                                                                                                     | Required | Platform | HarmonyOS Support    | 
-| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- | ----------- | 
-| title            |title for the button, required  |string| no   | iOS/Android       | yes | 
-| style            | style to apply to the touchable element that wraps the text|`ViewStyle`| no   | iOS/Android       | yes | 
-| onPress            |function to call on press  |function| no   | iOS/Android       | yes | 
-| renderButton              |You can fully customize what it renders inside of the PlatformPressable using the renderButton |ReactNode | no   | iOS/Android       | yes |
 ## 遗留问题
 
 ## 其他
 
+示例代码依赖以下三方库，请查看对应文档：
+
+- [@react-navigation/stack](/zh-cn/react-navigation-stack.md)
+- [@react-navigation/native](/zh-cn/react-navigation-native.md)
+
 ## 开源协议
 
 本项目基于 [The MIT License (MIT)](https://github.com/vonovak/react-navigation-header-buttons/blob/master/LICENSE) ，请自由地享受和参与开源。
-- 
Gitee


From aaec6bf7441905754d2fde9834dd97f6035831fd Mon Sep 17 00:00:00 2001
From: dongzhihan <dongzhihan@h-partners.com>
Date: Tue, 20 Aug 2024 11:18:38 +0800
Subject: [PATCH 2/2] =?UTF-8?q?docs:=20[Issues:=20#IAL5SJ]=20=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=20react-native-qr-decode-image-camera=20=E6=8C=87?=
 =?UTF-8?q?=E5=AF=BC=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-qr-decode-image-camera.md | 307 +++++++++----------
 1 file changed, 143 insertions(+), 164 deletions(-)

diff --git a/zh-cn/react-native-qr-decode-image-camera.md b/zh-cn/react-native-qr-decode-image-camera.md
index ac8efb04..cbe89f55 100644
--- a/zh-cn/react-native-qr-decode-image-camera.md
+++ b/zh-cn/react-native-qr-decode-image-camera.md
@@ -1,4 +1,3 @@
-<!-- {% raw %} -->
 > 模板版本：v0.2.2
 
 <p align="center">
@@ -43,137 +42,113 @@ yarn add @react-native-oh-tpl/react-native-qr-decode-image-camera@file:#
 下面的代码展示了这个库的基本使用场景：
 
 > [!WARNING] 使用时 import 的库名不变。
-> 示例中：launchImageLibrary 方法需引入Harmony OS 的react-native-image-picker库，跳转 [react-native-image-picker](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-image-picker.md)查看使用方法。
+
+> 示例中：launchImageLibrary 方法需引入 Harmony OS 的 react-native-image-picker 库，跳转 [react-native-image-picker](/zh-cn/react-native-image-picker.md)查看使用方法。
+
+QRreader
 
 ```js
 import React, {useState} from 'react';
-import {View, Text, Button} from 'react-native';
-import {QRreader, QRscanner} from 'react-native-qr-decode-image-camera';
-import {TestSuite, TestCase, Tester} from '@rnoh/testerino';
-import { launchImageLibrary } from 'react-native-image-picker';
-export const QRreaderExp = () => {
+import {Button, View, Text} from 'react-native';
+import {QRreader} from 'react-native-qr-decode-image-camera';
+import {launchImageLibrary} from 'react-native-image-picker';
+
+export const qrExample = () => {
   const [reader, setReader] = useState<any>('');
-  const [scanned, setScanned] = useState<boolean>(false);
-  const [flashMode, setFlashMode] = useState<boolean | null>(null); //初始值必须为null;
-  const [textInfo, setTextInfo] = useState<string>('');
+  return (
+    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
+      <Button
+        onPress={() => {
+          launchImageLibrary({mediaType: 'photo', selectionLimit: 1}, data => {
+            if (data.assets?.length) {
+              const path = {
+                uri: data.assets[0].originalPath,
+              };
+              QRreader(path)
+                .then(res => {
+                  setReader(res?.[0]?.originalValue);
+                })
+                .catch(error => {
+                  console.log(error);
+                });
+            }
+          });
+        }}
+        title="点击选择二维码照片 "
+      />
+      <Text style={{fontSize: 20}}>{reader}</Text>
+    </View>
+  );
+};
+```
+QRscanner
 
+```json
+import React, {useState} from 'react';
+import { View, Text, TouchableOpacity, StyleSheet} from 'react-native';
+import { QRscanner} from 'react-native-qr-decode-image-camera';
+
+
+export const qrExample = () => {
+
+  const [flashMode, setflashMode] = useState(false);
+  const onRead = res => {
+    console.log(res);
+  };
   return (
-    <Tester>
-      <TestSuite name="qr-decode-image-camera">
-        <TestCase
-          itShould="QRReader"
-          tags={['C_API']}
-          initialState={undefined as any}
-          arrange={({setState}) => {
-            return (
-              <View>
-                <Button
-                  onPress={() => {
-                    launchImageLibrary({ mediaType: 'photo', selectionLimit: 1 }, (data) => {
-                      if (data.assets?.length) {
-                        const path = {
-                          uri:data.assets[0].originalPath
-                        }
-                        QRreader(path)
-                        .then(res => {
-                          setReader(res?.[0]?.originalValue);
-                          setState(res?.[0]?.originalValue);
-                        })
-                        .catch(error => {
-                          console.log(error);
-                        });
-                      }
-                    })
-                  }}
-                  title="点击选择二维码照片 "
-                />
-                <Text style={{fontSize: 20}}>{reader}</Text>
-              </View>
-            );
-          }}
-          assert={async ({expect, state}) => {
-            expect(state).to.be.eq(reader);
-          }}
-        />
-        <TestCase
-          itShould="QRScaner"
-          tags={['C_API']}
-          initialState={undefined as any}
-          arrange={({setState}) => {
-            return (
-              <View >
-                <Button
-                  onPress={() => {
-                    setTextInfo('');
-                    setScanned(true); // 开启摄像头
-                  }}
-                  title="点击扫码 "
-                />
-                {scanned && (
-                  <QRscanner
-                    onRead={e => {
-                      console.log(e?.nativeEvent?.result, 'click onRead');
-                      setTextInfo(e?.nativeEvent?.result);
-                      setState(e?.nativeEvent?.result);
-                      setScanned(false);
-                    }}
-                    flashMode={flashMode} //闪光灯
-                    renderTopView={() => (
-                      <View
-                        style={{
-                          height: 50,
-                          justifyContent: 'center',
-                          alignItems: 'center',
-                          backgroundColor: '#0000004D',
-                        }}>
-                        <Text style={{fontSize: 18, color: 'green'}}>
-                          将二维码放入框内，即可自动扫描
-                        </Text>
-                      </View>
-                    )}
-                    renderBottomView={() => (
-                      <View
-                        style={{
-                          height: 100,
-                          justifyContent: 'center',
-                          alignItems: 'center',
-                          backgroundColor: '#0000004D',
-                        }}>
-                        <Text
-                          style={{fontSize: 18, color: 'red'}}
-                          onPress={() => {
-                            setFlashMode(!flashMode);
-                            console.log('click 点击开启/关闭闪光灯');
-                          }}>
-                          点击开启/关闭闪光灯
-                        </Text>
-                      </View>
-                    )}
-                  />
-                )}
-                <Text style={{fontSize: 20, color: 'red'}}>{textInfo}</Text>
-              </View>
-            );
-          }}
-          assert={async ({expect, state}) => {
-            expect(state).to.be.eq(textInfo);
-          }}
-        />
-      </TestSuite>
-    </Tester>
+    <View style={styles.container}>
+      <QRscanner
+        onRead={onRead}
+        renderBottomView={() => {
+          return (
+            <View
+              style={{
+                flex: 1,
+                flexDirection: 'row',
+                backgroundColor: '#0000004D',
+              }}>
+              <TouchableOpacity
+                style={{
+                  flex: 1,
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+                onPress={() => {
+                  if (flashMode) {
+                    setflashMode(false);
+                  } else {
+                    setflashMode(true);
+                  }
+                }}>
+                <Text style={{color: '#fff'}}>flashMode</Text>
+              </TouchableOpacity>
+            </View>
+          );
+        }}
+        flashMode={flashMode}
+        finderY={50}
+      />
+    </View>
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#000',
+  },
+});
 ```
+
 ## 使用 Codegen
 
 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。
 
 ## Link
 
-目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。
+本库鸿蒙侧实现依赖@react-native-oh-tpl/react-native-vision-camera 的原生端代码，如已在鸿蒙工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。
 
-首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony`
+如未引入请参照[@react-native-oh-tpl/react-native-vision-camera](/zh-cn/react-native-vision-camera.md)进行引入
 
 ### 引入原生端代码
 
@@ -212,9 +187,10 @@ ohpm install
 
 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
 
+
 ```diff
   ...
-+ import { RNQrDecodeImageCameraPackage } from "@react-native-oh-tpl/react-native-qr-decode-image-camera/ts";
++ import {RNQrDecodeImageCameraPackage} from '@react-native-oh-tpl/react-native-qr-decode-image-camera/ts';
 
 export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
   return [
@@ -223,7 +199,9 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
   ];
 }
 ```
+
 ### 在 ArkTs 侧引入 Fabric 组件
+
 找到 function buildCustomRNComponent()，一般位于 entry/src/main/ets/pages/index.ets 或 entry/src/main/ets/rn/LoadBundle.ets，添加：
 
 ```diff
@@ -236,13 +214,14 @@ export function buildCustomRNComponent(ctx: ComponentBuilderContext) {
 + if (ctx.componentName === NativeScan.NAME) {
 +   NativeScan({
 +     ctx: ctx.rnComponentContext,
-+     tag: ctx.tag   
++     tag: ctx.tag
 +   })
 + }
 ...
 }
 ...
 ```
+
 ### 运行
 
 点击右上角的 `sync` 按钮
@@ -259,13 +238,14 @@ ohpm install
 ## 约束与限制
 
 ### 兼容性
+
 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
 
 请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-qr-decode-image-camera](https://github.com/react-native-oh-library/react-native-qr-decode-image-camera/releases)
 
-
 ### 权限要求
-在 entry 目录下的module.json5中添加相机权限
+
+在 entry 目录下的 module.json5 中添加相机权限
 
 打开 entry/src/main/module.json5，添加：
 
@@ -288,53 +268,54 @@ ohpm install
 ## 静态方法
 
 > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。
->
-> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
->
-详情请查看[react-native-qr-decode-image-camera官方文档](https://github.com/deepanrajkumar/react-native-qr-decode-image-camera)
- | Name                          | Description                                          | Type    | Required | Platform    | HarmonyOS Support |
+
+> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+ | Name | Description | Type | Required | Platform | HarmonyOS Support |
  | ----------------------------- | ---------------------------------------------------- | ------- | -------- | ----------- | ----------------- |
- | QRreader | 调用此方法，调起图库，选择选择二维码图片进行图片解码，异步返回结果 | funtion | no       | IOS/Android | yes               |
+ | QRreader | Invoke this method to invoke the gallery, select the QR code image for image decoding, and asynchronously return the result. | funtion | no | iOS/Android | yes |
+
 ## 属性
-### QRscanner 
+
+### QRscanner
 
 > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。
->
-> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
->
-
-| Name                          | Description                                          | Type    | Required | Platform    | HarmonyOS Support |
-| ----------------------------- | ---------------------------------------------------- | ------- | -------- | ----------- | ----------------- |
-| isRepeatScan | whether to allow repeated scanning | boolean | no       | IOS/Android | no               |
-| zoom | Camera focal length range 0-1 | number | no       | IOS/Android | yes               |
-| flashMode |Turn on the flashlight |boolean | no       | IOS/Android | yes               |
-| onRead |scan callback |funtion | yes       | IOS/Android | yes|
-| maskColor |mask layer color |string | no       | IOS/Android | yes|
-| borderColor |border color |string | no       | IOS/Android | yes|
-| cornerColor |Color of corner of scan frame |string | no       | IOS/Android | yes|
-| borderWidth |border width of scan frame |number | no       | IOS/Android | yes|
-| cornerBorderWidth |border width of scan frame corner |number | no       | IOS/Android | yes|
-| cornerBorderLength |	width and height of the corner of the scan frame |number | no       | IOS/Android | yes|
-| rectHeight |	Scan frame height |number | no       | IOS/Android | yes|
-| rectWidth |	Scan Frame Width |number | no       | IOS/Android | yes|
-| finderX |scan frame X axis offset |number | no       | IOS/Android | yes|
-| finderY |scan frame Y axis offset |number | no       | IOS/Android | yes|
-| isCornerOffset |whether the corners are offset |boolean | no       | IOS/Android | yes|
-| cornerOffsetSize |offset |number | no       | IOS/Android | yes|
-| bottomHeight |Reserved height at the bottom |number | no       | IOS/Android | yes|
-| scanBarAnimateTime |scan line time |number | no       | IOS/Android | yes|
-| scanBarColor |scan line color |string | no       | IOS/Android | yes|
-| scanBarImage |scan line image |any | no       | IOS/Android | yes|
-| scanBarHeight |scan line height |number | no       | IOS/Android | yes|
-| scanBarMargin |scanline left and right margin |number | no       | IOS/Android | yes|
-| hintText |hintText |string | no       | IOS/Android | yes|
-| hintTextStyle |hint string style |object | no       | IOS/Android | yes|
-| hintTextPosition |hintTextPosition |number | no       | IOS/Android | yes|
-| renderTopView |render top View |funtion | no       | IOS/Android | yes|
-| renderBottomView |render bottom View|funtion | no       | IOS/Android | yes|
-| isShowScanBar |whether to show scan lines|boolean | no       | IOS/Android | yes|
-| topViewStyle |render top container style|object | no       | IOS/Android | yes|
-| bottomViewStyle |render bottom container style|object | no       | IOS/Android | yes|
+
+> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+| Name               | Description                                      | Type    | Required | Platform    | HarmonyOS Support |
+| ------------------ | ------------------------------------------------ | ------- | -------- | ----------- | ----------------- |
+| isRepeatScan       | whether to allow repeated scanning               | boolean | no       | iOS/Android | yes               |
+| zoom               | Camera focal length range 0-1                    | number  | no       | iOS/Android | no                |
+| flashMode          | Turn on the flashlight                           | boolean | no       | iOS/Android | yes               |
+| onRead             | scan callback                                    | funtion | yes      | iOS/Android | yes               |
+| maskColor          | mask layer color                                 | string  | no       | iOS/Android | yes               |
+| borderColor        | border color                                     | string  | no       | iOS/Android | yes               |
+| cornerColor        | Color of corner of scan frame                    | string  | no       | iOS/Android | yes               |
+| borderWidth        | border width of scan frame                       | number  | no       | iOS/Android | yes               |
+| cornerBorderWidth  | border width of scan frame corner                | number  | no       | iOS/Android | yes               |
+| cornerBorderLength | width and height of the corner of the scan frame | number  | no       | iOS/Android | yes               |
+| rectHeight         | Scan frame height                                | number  | no       | iOS/Android | yes               |
+| rectWidth          | Scan Frame Width                                 | number  | no       | iOS/Android | yes               |
+| finderX            | scan frame X axis offset                         | number  | no       | iOS/Android | yes               |
+| finderY            | scan frame Y axis offset                         | number  | no       | iOS/Android | yes               |
+| isCornerOffset     | whether the corners are offset                   | boolean | no       | iOS/Android | yes               |
+| cornerOffsetSize   | offset                                           | number  | no       | iOS/Android | yes               |
+| bottomHeight       | Reserved height at the bottom                    | number  | no       | iOS/Android | yes               |
+| scanBarAnimateTime | scan line time                                   | number  | no       | iOS/Android | yes               |
+| scanBarColor       | scan line color                                  | string  | no       | iOS/Android | yes               |
+| scanBarImage       | scan line image                                  | any     | no       | iOS/Android | yes               |
+| scanBarHeight      | scan line height                                 | number  | no       | iOS/Android | yes               |
+| scanBarMargin      | scanline left and right margin                   | number  | no       | IOS/Android | yes               |
+| hintText           | hintText                                         | string  | no       | IOS/Android | yes               |
+| hintTextStyle      | hint string style                                | object  | no       | iOS/Android | yes               |
+| hintTextPosition   | hintTextPosition                                 | number  | no       | iOS/Android | yes               |
+| renderTopView      | render top View                                  | funtion | no       | iOS/Android | yes               |
+| renderBottomView   | render bottom View                               | funtion | no       | iOS/Android | yes               |
+| isShowScanBar      | whether to show scan lines                       | boolean | no       | iOS/Android | yes               |
+| topViewStyle       | render top container style                       | object  | no       | iOS/Android | yes               |
+| bottomViewStyle    | render bottom container style                    | object  | no       | iOS/Android | yes               |
+
 ## 遗留问题
 
 ## 其他
@@ -342,5 +323,3 @@ ohpm install
 ## 开源协议
 
 本项目基于 [The MIT License (MIT)](https://github.com/deepanrajkumar/react-native-qr-decode-image-camera/blob/master/LICENSE) ，请自由地享受和参与开源。
-
-<!-- {% endraw %} -->
\ No newline at end of file
-- 
Gitee