From f6bb392569cf039b7230cb0287773d300147f0bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E7=90=A6?= <liqi219@h-partners.com>
Date: Sat, 25 Oct 2025 19:10:11 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20[Issues:=20#ID3I1E]=20=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9react-native-appearance=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

Signed-off-by: 李琦 <liqi219@h-partners.com>
---
 en/react-native-appearance.md    | 53 ++++++++++++++++----------------
 zh-cn/react-native-appearance.md | 38 +++++++++++++----------
 2 files changed, 47 insertions(+), 44 deletions(-)

diff --git a/en/react-native-appearance.md b/en/react-native-appearance.md
index 6b388984..fe91c722 100644
--- a/en/react-native-appearance.md
+++ b/en/react-native-appearance.md
@@ -12,7 +12,7 @@
     </a>
 </p>
 
-> [!Tip] [Github Address](https://github.com/expo/react-native-appearance)
+> [!Tip] [Github Address](https://github.com/react-native-oh-library/react-native-appearance)
 
 ## Installation and Usage
 
@@ -23,13 +23,13 @@ Navigate to your project directory and enter the following command:
 #### **npm**
 
 ```bash
-npm install react-native-appearance@0.3.5
+npm install @react-native-oh-tpl/react-native-appearance
 ```
 
 #### **yarn**
 
 ```bash
-yarn add react-native-appearance@0.3.5
+yarn add @react-native-oh-tpl/react-native-appearance
 ```
 
 <!-- tabs:end -->
@@ -43,28 +43,24 @@ The following code demonstrates how to use this color picker component in a page
 ```tsx
 import React, { useState } from "react";
 import { Button, View, Text, StyleSheet, useColorScheme } from 'react-native';
+import { Tester, TestSuite, TestCase } from '@rnoh/testerino';
 import { AppearanceHarmony } from 'react-native-appearance';
 
-export default class App extends React.Component {
-
-  // The user's preferred color scheme (e.g. Dark Mode).
+const AppearanceExample = () => {
   const scheme = useColorScheme();
   const currentScheme = scheme ?? scheme!.toString();
 
-  // Add an event handler that is fired when appearance preferences change.
   const [listenedScheme, setListenedScheme] = useState('');
   AppearanceHarmony.addChangeListener(({ colorScheme }) => {
     setListenedScheme(colorScheme ?? colorScheme!.toString());
   });
 
-  // Get the color scheme.
   const [gotScheme, setGotScheme] = useState('');
   const getAppearance = ()=> {
     const result = AppearanceHarmony.getColorScheme();
     setGotScheme(result ?? result!.toString());
   }
 
-  // Set the color scheme preference.
   const changeAppearance = ()=> {
     const result = AppearanceHarmony.getColorScheme();
     if (result == 'dark') {
@@ -86,18 +82,21 @@ export default class App extends React.Component {
     }
   });
 
-  render() {
-    return (
-      <View style={styles.container}>
-          <Text style={styles.row}>Current color scheme：{currentScheme}</Text>
-          <Text style={styles.row}>Listening color scheme：{listenedScheme}</Text>
-          <Text style={styles.row}>Get color scheme result：{gotScheme}</Text>
-          <View style={styles.row}><Button title="Get color scheme" onPress={()=>getAppearance()} /></View>
-          <View style={styles.row}><Button title="Set color scheme" onPress={()=>changeAppearance()} /></View>
-      </View>
-    )
-  }
-
+  return (
+    <Tester style={{ paddingBottom: 80 }}>
+      <TestSuite name='Appearance'>
+        <TestCase itShould='Display Mode'>
+          <View style={styles.container}>
+            <Text style={styles.row}>Current display mode:{currentScheme}</Text>
+            <Text style={styles.row}>Listening display mode:{listenedScheme}</Text>
+            <Text style={styles.row}>Acquired display mode:{gotScheme}</Text>
+            <View style={styles.row}><Button title="Get display mode" onPress={()=>getAppearance()} /></View>
+            <View style={styles.row}><Button title="Change display mode" onPress={()=>changeAppearance()} /></View>
+          </View>
+        </TestCase>
+      </TestSuite>
+    </Tester>
+  );
 }
 ```
 
@@ -121,12 +120,12 @@ react-native-harmony: 0.77.18; SDK: HarmonyOS 5.1.0.125; IDE: DevEco Studio 5.1.
 
 ### Functions
 
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| :--- | :--- | :--- | :--- | :--- | :--- |
-| `useColorScheme` | 获取当前显示模式。返回 ColorSchemeName 对象。 | `function` | No | All | yes |
-| `getColorScheme` | 获取当前显示模式。返回 ColorSchemeName 对象。 | `function` | No | All | yes |
-| `setColorScheme` | 设置显示模式。 | `function` | No | All | yes |
-| `addChangeListener`| 监听系统显示模式变化。返回 ColorSchemeName 对象。 | `function` | No | All | yes |
+| Name | Description                                                                                             | Type | Required | Platform | HarmonyOS Support |
+| :--- |:--------------------------------------------------------------------------------------------------------| :--- | :--- | :--- | :--- |
+| `useColorScheme` | Gets the current display mode. Returns a ColorSchemeName object.                                        | `function` | No | All | yes |
+| `getColorScheme` | Gets the current display mode. Returns a ColorSchemeName object.                                        | `function` | No | All | yes |
+| `setColorScheme` | Set display mode.                                                                                       | `function` | No | All | yes |
+| `addChangeListener`| Listen for system display mode changes. Returns a ColorSchemeName object.                               | `function` | No | All | yes |
 
 ## Known Issues
 
diff --git a/zh-cn/react-native-appearance.md b/zh-cn/react-native-appearance.md
index 8f9ca31c..9002c08e 100644
--- a/zh-cn/react-native-appearance.md
+++ b/zh-cn/react-native-appearance.md
@@ -12,7 +12,7 @@
     </a>
 </p>
 
-> [!Tip] [Github 地址](https://github.com/expo/react-native-appearance)
+> [!Tip] [Github 地址](https://github.com/react-native-oh-library/react-native-appearance)
 
 ## 安装与使用
 
@@ -23,13 +23,13 @@
 #### **npm**
 
 ```bash
-npm install react-native-appearance@0.3.5
+npm install @react-native-oh-tpl/react-native-appearance
 ```
 
 #### **yarn**
 
 ```bash
-yarn add react-native-appearance@0.3.5
+yarn add @react-native-oh-tpl/react-native-appearance
 ```
 
 <!-- tabs:end -->
@@ -43,10 +43,10 @@ yarn add react-native-appearance@0.3.5
 ```tsx
 import React, { useState } from "react";
 import { Button, View, Text, StyleSheet, useColorScheme } from 'react-native';
+import { Tester, TestSuite, TestCase } from '@rnoh/testerino';
 import { AppearanceHarmony } from 'react-native-appearance';
 
-export default class App extends React.Component {
-
+const AppearanceExample = () => {
   // 当前显示模式
   const scheme = useColorScheme();
   const currentScheme = scheme ?? scheme!.toString();
@@ -86,19 +86,23 @@ export default class App extends React.Component {
     }
   });
 
-  render() {
-    return (
-      <View style={styles.container}>
-          <Text style={styles.row}>当前显示模式：{currentScheme}</Text>
-          <Text style={styles.row}>监听的显示模式：{listenedScheme}</Text>
-          <Text style={styles.row}>获取的显示模式：{gotScheme}</Text>
-          <View style={styles.row}><Button title="获取显示模式" onPress={()=>getAppearance()} /></View>
-          <View style={styles.row}><Button title="修改显示模式" onPress={()=>changeAppearance()} /></View>
-      </View>
-    )
-  }
-
+  return (
+    <Tester style={{ paddingBottom: 80 }}>
+      <TestSuite name='Appearance'>
+        <TestCase itShould='显示模式'>
+          <View style={styles.container}>
+            <Text style={styles.row}>当前显示模式：{currentScheme}</Text>
+            <Text style={styles.row}>监听的显示模式：{listenedScheme}</Text>
+            <Text style={styles.row}>获取的显示模式：{gotScheme}</Text>
+            <View style={styles.row}><Button title="获取显示模式" onPress={()=>getAppearance()} /></View>
+            <View style={styles.row}><Button title="修改显示模式" onPress={()=>changeAppearance()} /></View>
+          </View>
+        </TestCase>
+      </TestSuite>
+    </Tester>
+  );
 }
+
 ```
 
 ## 约束与限制
-- 
Gitee