docs(cndocs): 同步多篇 React Native 中文文档更新 (#1008)

* docs(cndocs): 同步翻译更新（高质量）

* fix: resync translations when upstream docs are newer

* chore: consolidate translation sync entrypoints

* docs(cndocs): 补齐 AccessibilityInfo 同步内容

* docs(cndocs): 同步 DevSettings 等文档更新

Author: sunnylqm

cndocs/_remove-global-cli.md

@@ -1,5 +1,8 @@
-> 如果你之前全局安装过旧的`react-native-cli`命令行工具，请使用`npm uninstall -g react-native-cli`卸载掉它以避免一些冲突：
->
-> ```shell
-> npm uninstall -g react-native-cli @react-native-community/cli
-> ```
+:::warning
+如果你之前全局安装过 `react-native-cli` 包，请将其移除，因为它可能会导致一些意外问题：
+
+```shell
+npm uninstall -g react-native-cli @react-native-community/cli
+```
+
+:::

cndocs/accessibilityinfo.md

@@ -225,6 +225,26 @@ static isScreenReaderEnabled(): Promise<boolean>;
 
 ---
 
+### `isHighTextContrastEnabled()` <div className="label android">Android</div>
+
+```tsx
+static isHighTextContrastEnabled(): Promise<boolean>
+```
+
+查询是否启用了高对比度文本。返回 Promise，启用为 `true`，否则为 `false`。
+
+---
+
+### `isDarkerSystemColorsEnabled()` <div className="label ios">iOS</div>
+
+```tsx
+static isDarkerSystemColorsEnabled(): Promise<boolean>
+```
+
+查询是否启用了更深的系统颜色。返回 Promise，启用为 `true`，否则为 `false`。
+
+---
+
 ### `prefersCrossFadeTransitions()` <div className="label ios">iOS</div>
 
 ```tsx
@@ -237,6 +257,10 @@ static prefersCrossFadeTransitions(): Promise<boolean>;
 
 ### 🗑️ `setAccessibilityFocus()`
 
+:::warning Deprecated
+建议改用 `sendAccessibilityEvent`，并将 `eventType` 设为 `focus`。
+:::
+
 ```tsx
 static setAccessibilityFocus(reactTag: number);
 ```
@@ -248,3 +272,22 @@ static setAccessibilityFocus(reactTag: number);
 :::note
 确保希望接收无障碍焦点的 `View` 设置了 `accessible={true}`。
 :::
+
+---
+
+### `sendAccessibilityEvent()`
+
+```tsx
+static sendAccessibilityEvent(host: HostInstance, eventType: AccessibilityEventTypes);
+```
+
+以命令式方式在 React 组件上触发无障碍事件，例如为读屏器切换当前聚焦元素。
+
+:::note
+确保希望接收无障碍焦点的 `View` 设置了 `accessible={true}`。
+:::
+
+| 名称                                                           | 类型                    | 说明                                                                 |
+| -------------------------------------------------------------- | ----------------------- | -------------------------------------------------------------------- |
+| host <div className="label basic required">Required</div>      | HostInstance            | 要向其发送事件的组件 ref。                                           |
+| eventType <div className="label basic required">Required</div> | AccessibilityEventTypes | `'click'`（仅 Android）、`'focus'`、`'viewHoverEnter'`（仅 Android）或 `'windowStateChange'`（仅 Android）之一 |

cndocs/devsettings.md

@@ -13,35 +13,39 @@ title: DevSettings
 
 ### `addMenuItem()`
 
-```jsx
-static addMenuItem(title, handler)
+```tsx
+static addMenuItem(title: string, handler: () => any);
 ```
 
-在开发者菜单中添加一个自定义的菜单项：
+在开发者菜单中添加一个自定义的菜单项。
 
 **参数：**
 
-| 名称                                                           | 类型     |
-| -------------------------------------------------------------- | -------- |
-| title <div className="label basic required">必需</div>     | string   |
-| component <div className="label basic required">必需</div> | function |
+| 名称                                                         | 类型     |
+| ------------------------------------------------------------ | -------- |
+| title <div className="label basic required">必需</div>   | string   |
+| handler <div className="label basic required">必需</div> | function |
 
 **示例：**
 
-```jsx
+```tsx
 DevSettings.addMenuItem('Show Secret Dev Screen', () => {
   Alert.alert('Showing secret dev screen!');
 });
 ```
 
+---
+
 ### `reload()`
 
-```jsx
-static reload()
+```tsx
+static reload(reason?: string): void;
 ```
 
-重新加载引用（刷新）。可以直接调用也可以通过用户交互来触发。
+重新加载应用。可以直接调用，也可以通过用户交互来触发。
+
+**示例：**
 
-```jsx
+```tsx
 <Button title="Reload" onPress={() => DevSettings.reload()} />
 ```

cndocs/dimensions.md

@@ -3,32 +3,33 @@ id: dimensions
 title: Dimensions
 ---
 
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+:::info
+对于 React 组件，[`useWindowDimensions`](usewindowdimensions) 是首选 API。与 `Dimensions` 不同，它会在窗口尺寸更新时同步更新。这种方式也更符合 React 的编程范式。
+:::
 
-本模块用于获取设备屏幕的宽高。
-
-> 对于 React 函数组件，我们更推荐使用[`useWindowDimensions`](usewindowdimensions)这个 Hook API。和 `Dimensions` 不同，它会在屏幕尺寸变化时自动更新。
-
-```jsx
-import { Dimensions } from 'react-native';
+```tsx
+import {Dimensions} from 'react-native';
 ```
 
-你可以用下面的方法来获取设备的宽高：
+你可以使用下面的代码获取应用窗口的宽度和高度：
 
-```jsx
+```tsx
 const windowWidth = Dimensions.get('window').width;
 const windowHeight = Dimensions.get('window').height;
 ```
 
-> 注意：尽管尺寸信息立即就可用，但它可能会在将来被修改（譬如设备的方向改变），所以基于这些常量的渲染逻辑和样式应当每次 render 之后都调用此函数，而不是将对应的值保存下来。（举例来说，你可能需要使用内联的样式而不是在`StyleSheet`中保存相应的尺寸）。
+:::note
+尽管尺寸信息会立即可用，但它们可能发生变化（例如设备旋转、可折叠设备等），因此任何依赖这些常量的渲染逻辑或样式，都应尽量在每次渲染时调用此函数，而不是缓存其值（例如，使用内联样式，而不是把值写死在 `StyleSheet` 中）。
+:::
 
-如果你要考虑可折叠的设备，或者其他屏幕尺寸可变的设备，可以参考下面例子中所使用的事件监听函数或是[`useWindowDimensions`](usewindowdimensions)：
+如果你的目标设备是可折叠设备，或者设备的屏幕尺寸、应用窗口尺寸可能发生变化，可以像下面的示例一样使用 Dimensions 模块提供的事件监听器。
 
 ## 示例
 
-```SnackPlayer name=Dimensions
+```SnackPlayer name=Dimensions%20Example
 import React, {useState, useEffect} from 'react';
-import {View, StyleSheet, Text, Dimensions} from 'react-native';
+import {StyleSheet, Text, Dimensions} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
 const windowDimensions = Dimensions.get('window');
 const screenDimensions = Dimensions.get('screen');
@@ -50,20 +51,22 @@ const App = () => {
   });
 
   return (
-    <View style={styles.container}>
-      <Text style={styles.header}>Window Dimensions</Text>
-      {Object.entries(dimensions.window).map(([key, value]) => (
-        <Text>
-          {key} - {value}
-        </Text>
-      ))}
-      <Text style={styles.header}>Screen Dimensions</Text>
-      {Object.entries(dimensions.screen).map(([key, value]) => (
-        <Text>
-          {key} - {value}
-        </Text>
-      ))}
-    </View>
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.header}>Window Dimensions</Text>
+        {Object.entries(dimensions.window).map(([key, value]) => (
+          <Text>
+            {key} - {value}
+          </Text>
+        ))}
+        <Text style={styles.header}>Screen Dimensions</Text>
+        {Object.entries(dimensions.screen).map(([key, value]) => (
+          <Text>
+            {key} - {value}
+          </Text>
+        ))}
+      </SafeAreaView>
+    </SafeAreaProvider>
   );
 };
 
@@ -82,9 +85,7 @@ const styles = StyleSheet.create({
 export default App;
 ```
 
----
-
-# 文档
+# 参考
 
 ## 方法
 

cndocs/turbo-native-modules-ios.md

@@ -9,36 +9,36 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con
 
 ## 准备你的 Xcode 项目
 
-我们需要使用 Xcode 准备你的 iOS 项目。完成这 **6 步** 后，你将拥有一个实现 `NativeLocalStorageSpec` 接口的 `RCTNativeLocalStorage`。
+我们需要使用 Xcode 准备你的 iOS 项目。完成这 **6 步** 后，你将拥有一个实现生成的 `NativeLocalStorageSpec` 接口的 `RCTNativeLocalStorage`。
 
-1. 打开 CocoPods 生成的 Xcode workspace 文件：
+1. 打开 CocoaPods 生成的 Xcode Workspace：
 
 ```bash
 cd ios
 open TurboModuleExample.xcworkspace
 ```
 
-<img class="half-size" alt="Open Xcode Workspace" src="/docs/assets/turbo-native-modules/xcode/1.webp" />
+<img className="half-size" alt="Open Xcode Workspace" src="/docs/assets/turbo-native-modules/xcode/1.webp" />
 
 2. 右键点击应用，选择 <code>New Group</code>，将新组命名为 `NativeLocalStorage`。
 
-<img class="half-size" alt="Right click on app and select New Group" src="/docs/assets/turbo-native-modules/xcode/2.webp" />
+<img className="half-size" alt="Right click on app and select New Group" src="/docs/assets/turbo-native-modules/xcode/2.webp" />
 
 3. 在 `NativeLocalStorage` 组中，创建 <code>New</code>→<code>File from Template</code>。
 
-<img class="half-size" alt="Create a new file using the Cocoa Touch Class template" src="/docs/assets/turbo-native-modules/xcode/3.webp" />
+<img className="half-size" alt="Create a new file using the Cocoa Touch Class template" src="/docs/assets/turbo-native-modules/xcode/3.webp" />
 
 4. 使用 <code>Cocoa Touch Class</code> 模板。
 
-<img class="half-size" alt="Use the Cocoa Touch Class template" src="/docs/assets/turbo-native-modules/xcode/4.webp"  />
+<img className="half-size" alt="Use the Cocoa Touch Class template" src="/docs/assets/turbo-native-modules/xcode/4.webp"  />
 
-5. 将类命名为 <code>RCTNativeLocalStorage</code>，并选择 <code>Objective-C</code> 语言。
+5. 将 Cocoa Touch Class 命名为 <code>RCTNativeLocalStorage</code>，并选择 <code>Objective-C</code> 语言。
 
-<img class="half-size" alt="Create an Objective-C RCTNativeLocalStorage class" src="/docs/assets/turbo-native-modules/xcode/5.webp" />
+<img className="half-size" alt="Create an Objective-C RCTNativeLocalStorage class" src="/docs/assets/turbo-native-modules/xcode/5.webp" />
 
 6. 将 <code>RCTNativeLocalStorage.m</code> 重命名为 <code>RCTNativeLocalStorage.mm</code>，使其成为 Objective-C++ 文件。
 
-<img class="half-size" alt="Convert to and Objective-C++ file" src="/docs/assets/turbo-native-modules/xcode/6.webp" />
+<img className="half-size" alt="Convert to and Objective-C++ file" src="/docs/assets/turbo-native-modules/xcode/6.webp" />
 
 ## 使用 NSUserDefaults 实现 localStorage
 
@@ -78,8 +78,6 @@ static NSString *const RCTNativeLocalStorageKey = @"local-storage";
 
 @implementation RCTNativeLocalStorage
 
-RCT_EXPORT_MODULE(NativeLocalStorage)
-
 - (id) init {
   if (self = [super init]) {
     _localStorage = [[NSUserDefaults alloc] initWithSuiteName:RCTNativeLocalStorageKey];
@@ -111,14 +109,57 @@ RCT_EXPORT_MODULE(NativeLocalStorage)
   }
 }
 
++ (NSString *)moduleName
+{
+  return @"NativeLocalStorage";
+}
+
 @end
 ```
 
-重要注意事项：
+需要注意的要点：
 
-- `RCT_EXPORT_MODULE` 导出并注册模块，使用我们在 JavaScript 环境中访问它的标识符：`NativeLocalStorage`。更多详情请参阅 [docs](./legacy/native-modules-ios#module-name)。
 - 你可以使用 Xcode 跳转到 Codegen `@protocol NativeLocalStorageSpec`。你也可以使用 Xcode 为你生成 stub。
 
+## 在应用中注册原生模块
+
+最后一步是更新 `package.json`，告诉 React Native 如何将原生模块的 JS 规格与这些规格在原生代码中的具体实现关联起来。
+
+按如下方式修改 `package.json`：
+
+```json title="package.json"
+     "start": "react-native start",
+     "test": "jest"
+   },
+   "codegenConfig": {
+     "name": "NativeLocalStorageSpec",
+     "type": "modules",
+     "jsSrcsDir": "specs",
+     "android": {
+       "javaPackageName": "com.sampleapp.specs"
+     },
+     // highlight-add-start
+     "ios": {
+        "modulesProvider": {
+          "NativeLocalStorage": "RCTNativeLocalStorage"
+        }
+     }
+     // highlight-add-end
+   },
+
+   "dependencies": {
+```
+
+此时，你需要重新安装 Pods，以确保再次运行 codegen 来生成新文件：
+
+```bash
+# from the ios folder
+bundle exec pod install
+open SampleApp.xcworkspace
+```
+
+如果你现在从 Xcode 构建应用，应该就可以成功构建。
+
 ## 在模拟器上构建并运行你的代码
 
 <Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
@@ -135,6 +176,6 @@ yarn run ios
 </Tabs>
 
 <video width="30%" height="30%" playsinline="true" autoplay="true" muted="true" loop="true">
-    <source src="https://cdn.jsdelivr.net/gh/reactnativecn/react-native-website@gh-pages/docs/assets/turbo-native-modules/turbo-native-modules-ios.webm" type="video/webm" />
-    <source src="https://cdn.jsdelivr.net/gh/reactnativecn/react-native-website@gh-pages/docs/assets/turbo-native-modules/turbo-native-modules-ios.mp4" type="video/mp4" />
+    <source src="/docs/assets/turbo-native-modules/turbo-native-modules-ios.webm" type="video/webm" />
+    <source src="/docs/assets/turbo-native-modules/turbo-native-modules-ios.mp4" type="video/mp4" />
 </video>

package.json

@@ -16,6 +16,7 @@
     "build": "yarn --cwd cnwebsite build",
     "build:fast": "yarn --cwd cnwebsite build:fast",
     "serve": "yarn --cwd cnwebsite serve",
+    "sync-translations": "bash ./scripts/sync-translations.sh",
     "prepare": "husky",
     "lint": "eslint .",
     "lint:packages": "yarn workspaces foreach --from \"packages/*\" -p -R run lint",