0.76

Author: sunnylqm

cndocs/_markdown-m1-cocoapods.mdx

@@ -6,290 +6,30 @@
 
 - **Fabric 原生组件** - 指已经适配以与新架构（即新渲染器）良好协同工作的组件。为简洁起见，您可能会看到它们被称为**Fabric 组件**。
 - **Turbo 原生模块** - 指已经适配以与新架构（即新原生模块系统）良好协同工作的模块。为简洁起见，您可能会看到它们被称为**Turbo 模块**。
-  
 - **传统原生组件** - 指运行在旧版 React Native 架构上的组件。
 - **传统原生模块** - 指运行在旧版 React Native 架构上的模块。
-  
 
-## II. Flow 类型到原生类型的映射
+## II. Codegen 类型
 
-您可以使用以下表格作为参考，了解每个平台支持哪些类型以及它们在各个平台上的映射关系：
+您可以使用以下表格作为参考，了解每种类型在不同平台上的支持情况：
 
-### `string`
+| Flow                                                                       | TypeScript                                          | Flow Nullable Support                                   | TypeScript Nullable Support                          | Android (Java)                       | iOS (ObjC)                                                     |
+| -------------------------------------------------------------------------- | --------------------------------------------------- | ------------------------------------------------------- | ---------------------------------------------------- | ------------------------------------ | -------------------------------------------------------------- |
+| `string`                                                                   | `string`                                            | `?string`                                               | <code>string &#124; null</code>                      | `string`                             | `NSString`                                                     |
+| `boolean`                                                                  | `boolean`                                           | `?boolean`                                              | <code>boolean &#124; null</code>                     | `Boolean`                            | `NSNumber`                                                     |
+| Object Literal<br /><code>&#123;&#124; foo: string, ...&#124;&#125;</code> | <code>&#123; foo: string, ...&#125; as const</code> | <code>?&#123;&#124; foo: string, ...&#124;&#125;</code> | <code>?&#123; foo: string, ...&#125; as const</code> | \-                                   | \-                                                             |
+| Object [[1](#notes)]                                                       | Object [[1](#notes)]                                | `?Object`                                               | <code>Object &#124; null</code>                      | `ReadableMap`                        | `@` (untyped dictionary)                                       |
+| <code>Array&lt;T&gt;</code>                                                | <code>Array&lt;T&gt;</code>                         | <code>?Array&lt;T&gt;</code>                            | <code>Array&lt;T&gt; &#124; null</code>              | `ReadableArray`                      | `NSArray` (or `RCTConvertVecToArray` when used inside objects) |
+| `Function`                                                                 | `Function`                                          | `?Function`                                             | <code>Function &#124; null</code>                    | \-                                   | \-                                                             |
+| <code>Promise&lt;T&gt;</code>                                              | <code>Promise&lt;T&gt;</code>                       | <code>?Promise&lt;T&gt;</code>                          | <code>Promise&lt;T&gt; &#124; null</code>            | `com.facebook.react.bridge.Promise`  | `RCTPromiseResolve` and `RCTPromiseRejectBlock`                |
+| Type Unions<br /><code>'SUCCESS'&#124;'FAIL'</code>                        | Type Unions<br /><code>'SUCCESS'&#124;'FAIL'</code> | Only as callbacks                                       |                                                      | \-                                   | \-                                                             |
+| Callbacks<br />`() =>`                                                     | Callbacks<br />`() =>`                              | Yes                                                     |                                                      | `com.facebook.react.bridge.Callback` | `RCTResponseSenderBlock`                                       |
+| `number`                                                                   | `number`                                            | No                                                      |                                                      | `double`                             | `NSNumber`                                                     |
 
-<VerticalTable data={[
-['Nullable Support?', <code>?string</code>],
-['Android (Java)', <code>String</code>],
-['iOS', <code>NSString</code>],
-]} />
+### Notes:
 
-### `boolean`
+<b>[1]</b> 我们强烈建议使用对象字面量而不是对象。
 
-<VerticalTable data={[
-['Nullable Support?', <code>?boolean</code>],
-['Android (Java)', <code>Boolean</code>],
-['iOS', <code>NSNumber</code>],
-]} />
-
-### 对象字面量
-
-比起普通的`Object`来说我们更推荐使用对象字面量，其更具有类型安全性。
-
-**示例:** `{| foo: string, ... |}`
-
-<VerticalTable data={[
-['Nullable Support?', <code>{`?{| foo: string, ...|}`}</code>],
-['Android (Java)', '-'],
-['iOS', '-'],
-]} />
-
-### `Object`
-
-:::note
-推荐使用[对象字面量](#object-literal)。
-:::
-
-<VerticalTable data={[
-['Nullable Support?', <code>?Object</code>],
-['Android (Java)', <code>ReadableMap</code>],
-['iOS', <><code>@{}</code> (untyped dictionary)</>],
-]} />
-
-### `Array<*>`
-
-<VerticalTable data={[
-['Nullable Support?', <code>{`?Array<*>`}</code>],
-['Android (Java)', <code>ReadableArray</code>],
-['iOS', <><code>NSArray</code> (or <code>RCTConvertVecToArray</code> when used inside objects)</>],
-]} />
-
-### `Function`
-
-<VerticalTable data={[
-['Nullable Support?', <code>?Function</code>],
-['Android (Java)', '-'],
-['iOS', '-'],
-]} />
-
-### `Promise<*>`
-
-<VerticalTable data={[
-['Nullable Support?', <code>{`?Promise<*>`}</code>],
-['Android (Java)', <code>com.facebook.react.bridge.Promise</code>],
-['iOS', <><code>RCTPromiseResolve</code> and <code>RCTPromiseRejectBlock</code></>],
-]} />
-
-### 类型联合
-
-类型联合仅支持作为回调函数。
-
-**Example:** `'SUCCESS' | 'FAIL'`
-
-<VerticalTable data={[
-['Nullable Support?', 'Only as callbacks.'],
-['Android (Java)', '-'],
-['iOS', '-'],
-]} />
-
-### 回调函数
-
-回调函数没有类型检查，并且被泛化为`Object`。
-
-**Example:** `() =>`
-
-<VerticalTable data={[
-['Nullable Support?', 'Yes'],
-['Android (Java)', <code>com.facebook.react.bridge.Callback</code>],
-['iOS', <code>RCTResponseSenderBlock</code>],
-]} />
-
-:::note
-您可能还会发现参考 React Native 中核心模块的 JavaScript 规范很有用。这些规范位于 React Native 存储库中的`Libraries/`目录内。
+:::info
+您也可以参考 React Native 核心模块的 JavaScript 规范。这些位于 React Native 仓库的 [`Libraries/`](https://github.com/facebook/react-native/tree/main/packages/react-native/Libraries) 目录中。
 :::
-
-## III. TypeScript 到原生类型映射
-
-您可以使用以下表格作为参考，了解支持的类型以及它们在每个平台上的映射关系：
-
-### `string`
-
-<VerticalTable data={[
-['Nullable Support?', <code>{`string | null`}</code>],
-['Android (Java)', <code>String</code>],
-['iOS', <code>NSString</code>],
-]} />
-
-### `boolean`
-
-<VerticalTable data={[
-['Nullable Support?', <code>{`boolean | null`}</code>],
-['Android (Java)', <code>Boolean</code>],
-['iOS', <code>NSNumber</code>],
-]} />
-
-### `number`
-
-<VerticalTable data={[
-['Nullable Support?', 'No'],
-['Android (Java)', <code>double</code>],
-['iOS', <code>NSNumber</code>],
-]} />
-
-### Object literal
-
-This is recommended over using plain `Object`, for type safety.
-
-**Example:** `{| foo: string, ... |}`
-
-<VerticalTable data={[
-['Nullable Support?', <code>{`{| foo: string, ...|} | null`}</code>],
-['Android (Java)', '-'],
-['iOS', '-'],
-]} />
-
-### `Object`
-
-:::note
-Recommended to use [Object literal](#object-literal-1) instead.
-:::
-
-<VerticalTable data={[
-['Nullable Support?', <code>{`Object | null`}</code>],
-['Android (Java)', <code>ReadableMap</code>],
-['iOS', <><code>@{}</code> (untyped dictionary)</>],
-]} />
-
-### `Array<*>`
-
-<VerticalTable data={[
-['Nullable Support?', <code>{`Array<*> | null`}</code>],
-['Android (Java)', <code>ReadableArray</code>],
-['iOS', <><code>NSArray</code> (or <code>RCTConvertVecToArray</code> when used inside objects)</>],
-]} />
-
-### `Function`
-
-<VerticalTable data={[
-['Nullable Support?', <code>?{`Function | null`}</code>],
-['Android (Java)', '-'],
-['iOS', '-'],
-]} />
-
-### `Promise<*>`
-
-<VerticalTable data={[
-['Nullable Support?', <code>{`Promise<*> | null`}</code>],
-['Android (Java)', <code>com.facebook.react.bridge.Promise</code>],
-['iOS', <><code>RCTPromiseResolve</code> and <code>RCTPromiseRejectBlock</code></>],
-]} />
-
-### Type Unions
-
-Type unions are only supported as callbacks.
-
-**Example:** `'SUCCESS' | 'FAIL'`
-
-<VerticalTable data={[
-['Nullable Support?', 'Only as callbacks.'],
-['Android (Java)', '-'],
-['iOS', '-'],
-]} />
-
-### Callbacks
-
-Callback functions are not type checked, and are generalized as `Object`s.
-
-**Example:** `() =>`
-
-<VerticalTable data={[
-['Nullable Support?', 'Yes'],
-['Android (Java)', <code>com.facebook.react.bridge.Callback</code>],
-['iOS', <code>RCTResponseSenderBlock</code>],
-]} />
-
-您可能还会发现参考 React Native 中核心模块的 JavaScript 规范很有用。这些规范位于 React Native 存储库的`Libraries/`目录内。
-
-## IV. 在开发过程中调用代码生成
-
-> 本节包含特定于 React Native v0.66 的信息。
-
-通常在构建时调用 Codegen，但是您可能会发现按需生成原生接口代码以进行故障排除很有用。
-
-如果您希望手动调用 codegen，有两个选项：
-
-1. 直接调用 Gradle 任务（Android）。
-2. 手动调用脚本。
-
-### Android - 直接调用 Gradle 任务
-
-您可以通过调用以下任务来触发 Codegen：
-
-```bash
-./gradlew generateCodegenArtifactsFromSchema --rerun-tasks
-```
-
-额外的 `--rerun-tasks` 标志被添加以确保 Gradle 忽略对该任务的 `UP-TO-DATE` 检查。在正常开发过程中，您不应该需要它。
-
-`generateCodegenArtifactsFromSchema` 任务通常在 `preBuild` 任务之前运行，因此您不需要手动调用它，但它将在构建之前触发。
-
-### 手动调用脚本
-
-或者，您可以直接调用 Codegen，绕过 Gradle 插件或 CocoaPods 基础设施。
-可以使用以下命令完成此操作。
-
-现在您已经配置了 Gradle 插件或 CocoaPods 库，所以要提供的参数看起来会非常熟悉。
-
-#### 生成模式文件
-
-首先，您需要从 JavaScript 源代码中生成一个模式文件。只有在 JavaScript 规范发生更改时才需要执行此操作。生成此模式的脚本作为`react-native-codegen`包的一部分提供。如果在 React Native 应用程序内运行此脚本，可以直接使用位于`node_modules`目录下的该包：
-
-```bash
-node node_modules/react-native-codegen/lib/cli/combine/combine-js-to-schema-cli.js \
-  <output_file_schema_json> <javascript_sources_dir>
-```
-
-> `react-native-codegen`的源代码可在 React Native 存储库中找到，位于`packages/react-native-codegen`目录下。如果需要从源代码构建自己的`react-native-codegen`包，请在该目录中运行 `yarn install` 和 `yarn build`. 在大多数情况下，您不需要这样做。
-
-#### 生成原生代码构件
-
-一旦您拥有用于本地模块或组件的架构文件，您可以使用第二个脚本为库生成实际的原生代码构件。您可以使用前一个脚本生成的相同架构文件。
-
-```bash
-node node_modules/react-native/scripts/generate-specs-cli.js \
-  --platform <ios|android> \
-  --schemaPath <generated_schema_json_file> \
-  --outputDir <output_dir> \
-  [--libraryName library_name] \
-  [--javaPackageName java_package_name] \
-  [--libraryType all(default)|modules|components]
-```
-
-> **注意：** Codegen 的输出构件位于 build 文件夹中，不应提交到版本控制系统。
-> 它们仅供参考。
-
-##### 示例
-
-以下是调用 Codegen 脚本的基本示例，用于为提供原生模块的库生成原生 iOS 界面代码。此库的 JavaScript 规范源文件位于`js/`子目录中，而该库的原生代码期望在`ios`子目录中可用原生接口。
-
-```bash
-# 生成模式 - 仅在JS规范更改时需要执行
-node node_modules/react-native-codegen/lib/cli/combine/combine-js-to-schema-cli.js /tmp/schema.json ./js
-
-# 生成原生代码构件
-node node_modules/react-native/scripts/generate-specs-cli.js \
-  --platform ios \
-  --schemaPath /tmp/schema.json \
-  --outputDir ./ios \
-  --libraryName MyLibSpecs \
-  --libraryType modules
-```
-
-在上面的示例中，代码生成脚本将会生成几个文件：`MyLibSpecs.h` 和 `MyLibSpecs-generated.mm`，以及一些 `.h` 和 `.cpp` 文件，全部位于 `ios` 目录下。
-
-## V. 关于现有应用的注意事项
-
-本指南提供了迁移基于 React Native 提供的默认应用模板的应用程序的说明。如果您的应用程序与模板有所偏离，或者您正在使用从未基于该模板构建过的应用程序，则以下部分可能会对您有所帮助。
-
-### 查找桥接代理
-
-本指南假设`AppDelegate`被配置为桥接代理。如果您不确定哪个是您的桥接代理，请在`RCTBridge`和`RCTCxxBridge`中设置断点，运行您的应用，并检查 `self.delegate`.

cndocs/appendix.md

@@ -5,30 +5,30 @@ title: 'Fabric Native Modules: Android'
 
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
 
-Now it's time to write some Android platform code to be able to render the web view. The steps you need to follow are:
+现在，是时候编写一些 Android 平台代码，以便能够渲染 web 视图。以下是需要的步骤：
 
-- Running Codegen
-- Write the code for the `ReactWebView`
-- Write the code for the `ReactWebViewManager`
-- Write the code for the `ReactWebViewPackage`
-- Register the `ReactWebViewPackage` in the application
+- 运行 Codegen
+- 编写 `ReactWebView` 的代码
+- 编写 `ReactWebViewManager` 的代码
+- 编写 `ReactWebViewPackage` 的代码
+- 在应用中注册 `ReactWebViewPackage`
 
-### 1. Run Codegen through Gradle
+### 1. 使用 Gradle 运行 Codegen
 
-Run this once to generate boilerplate that your IDE of choice can use.
+运行一次以生成你的 IDE 可以使用的样板代码。
 
 ```bash title="Demo/"
 cd android
 ./gradlew generateCodegenArtifactsFromSchema
 ```
 
-Codegen will generate the `ViewManager` interface you need to implement and the `ViewManager` delegate for the web view.
+Codegen 将生成你需要实现 `ViewManager` 接口和 `ViewManager` 委托的 web 视图。
 
-### 2. Write the `ReactWebView`
+### 2. 编写 `ReactWebView`
 
-The `ReactWebView` is the component that wraps the Android native view that React Native will render when using our custom Component.
+`ReactWebView` 是包装 Android 原生视图的组件，React Native 将在使用自定义组件时渲染它。
 
-Create a `ReactWebView.java` or a `ReactWebView.kt` file in the `android/src/main/java/com/webview` folder with this code:
+在 `android/src/main/java/com/webview` 文件夹中创建一个 `ReactWebView.java` 或 `ReactWebView.kt` 文件，并使用以下代码：
 
 <Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
 <TabItem value="java">
@@ -183,13 +183,13 @@ class ReactWebView: WebView {
 </TabItem>
 </Tabs>
 
-The `ReactWebView` extends the Android `WebView` so you can reuse all the properties already defined by the platform with ease.
+`ReactWebView` 扩展了 Android `WebView`，因此你可以轻松地重用平台已经定义的所有属性。
 
-The class defines the three Android constructors but defers their actual implementation to the private `configureComponent` function. This function takes care of initializing all the components specific properties: in this case you are setting the layout of the `WebView` and you are defining the `WebClient` that you use to customize the behavior of the `WebView`. In this code, the `ReactWebView` emits an event when the page finishes loading, by implementing the `WebClient`'s `onPageFinished` method.
+该类定义了三个 Android 构造函数，但将它们的实际实现推迟到私有 `configureComponent` 函数。此函数负责初始化所有组件的特定属性：在这种情况下，你正在设置 `WebView` 的布局，并定义你用于自定义 `WebView` 行为的 `WebClient`。在此代码中，`ReactWebView` 在页面加载完成后通过实现 `WebClient` 的 `onPageFinished` 方法来发出事件。
 
-The code then defines a helper function to actually emit an event. To emit an event, you have to:
+然后，代码定义了一个实际发出事件的帮助函数。要发出事件，你必须：
 
-- grab a reference to the `ReactContext`;
+- 获取 `ReactContext` 的引用；
 - retrieve the `surfaceId` of the view that you are presenting;
 - grab a reference to the `eventDispatcher` associated with the view;
 - build the payload for the event using a `WritableMap` object;