Skip to content

Commit

Permalink
fix: format
Browse files Browse the repository at this point in the history
  • Loading branch information
sunnylqm committed Sep 16, 2023
1 parent 2aa84fc commit 3042c1d
Show file tree
Hide file tree
Showing 24 changed files with 1,818 additions and 1,738 deletions.
100 changes: 50 additions & 50 deletions cndocs/new-architecture-appendix.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,18 @@ import VerticalTable from '@site/core/VerticalTable';

<NewArchitectureWarning/>

## I. Terminology
## 一、术语

The whole New Architecture related guides will stick to the following **terminology**:
整个与新架构相关的指南将遵循以下**术语**

- **Legacy Native Components** - To refer to Components which are running on the old React Native architecture.
- **Legacy Native Modules** - To refer to Modules which are running on the old React Native architecture.
- **Fabric Native Components** - To refer to Components which have been adapted to work well with the New Architecture, namely the new renderer. For brevity you might find them referred as **Fabric Components**.
- **Turbo Native Modules** - To refer to Modules which have been adapted to work well with the New Architecture, namely the new Native Module System. For brevity you might find them referred as **Turbo Modules**
- **传统原生组件** - 指运行在旧版 React Native 架构上的组件。
- **传统原生模块** - 指运行在旧版 React Native 架构上的模块。
- **Fabric 原生组件** - 指已经适配以与新架构(即新渲染器)良好协同工作的组件。为简洁起见,您可能会看到它们被称为**Fabric 组件**
- **Turbo 原生模块** - 指已经适配以与新架构(即新原生模块系统)良好协同工作的模块。为简洁起见,您可能会看到它们被称为**Turbo 模块**

## II. Flow Type to Native Type Mapping
## II. Flow 类型到原生类型的映射

You may use the following table as a reference for which types are supported and what they map to in each platform:
您可以使用以下表格作为参考,了解每个平台支持哪些类型以及它们在各个平台上的映射关系:

### `string`

Expand All @@ -37,11 +37,11 @@ You may use the following table as a reference for which types are supported and
['iOS', <code>NSNumber</code>],
]} />

### Object literal
### 对象字面量

This is recommended over using plain `Object`, for type safety.
比起普通的`Object`来说我们更推荐使用对象字面量,其更具有类型安全性。

**Example:** `{| foo: string, ... |}`
**示例:** `{| foo: string, ... |}`

<VerticalTable data={[
['Nullable Support?', <code>{`?{| foo: string, ...|}`}</code>],
Expand All @@ -52,7 +52,7 @@ This is recommended over using plain `Object`, for type safety.
### `Object`

:::note
Recommended to use [Object literal](#object-literal) instead.
推荐使用[对象字面量](#object-literal)
:::

<VerticalTable data={[
Expand Down Expand Up @@ -85,9 +85,9 @@ Recommended to use [Object literal](#object-literal) instead.
['iOS', <><code>RCTPromiseResolve</code> and <code>RCTPromiseRejectBlock</code></>],
]} />

### Type Unions
### 类型联合

Type unions are only supported as callbacks.
类型联合仅支持作为回调函数。

**Example:** `'SUCCESS' | 'FAIL'`

Expand All @@ -97,9 +97,9 @@ Type unions are only supported as callbacks.
['iOS', '-'],
]} />

### Callbacks
### 回调函数

Callback functions are not type checked, and are generalized as `Object`s.
回调函数没有类型检查,并且被泛化为`Object`

**Example:** `() =>`

Expand All @@ -110,12 +110,12 @@ Callback functions are not type checked, and are generalized as `Object`s.
]} />

:::note
You may also find it useful to refer to the JavaScript specifications for the core modules in React Native. These are located inside the `Libraries/` directory in the React Native repository.
您可能还会发现参考 React Native 中核心模块的 JavaScript 规范很有用。这些规范位于 React Native 存储库中的`Libraries/`目录内。
:::

## III. TypeScript to Native Type Mapping
## III. TypeScript 到原生类型映射

You may use the following table as a reference for which types are supported and what they map to in each platform:
您可以使用以下表格作为参考,了解支持的类型以及它们在每个平台上的映射关系:

### `string`

Expand Down Expand Up @@ -213,52 +213,52 @@ Callback functions are not type checked, and are generalized as `Object`s.
['iOS', <code>RCTResponseSenderBlock</code>],
]} />

You may also find it useful to refer to the JavaScript specifications for the core modules in React Native. These are located inside the `Libraries/` directory in the React Native repository.
您可能还会发现参考 React Native 中核心模块的 JavaScript 规范很有用。这些规范位于 React Native 存储库的`Libraries/`目录内。

## IV. Invoking the code-gen during development
## IV. 在开发过程中调用代码生成

> This section contains information specific to v0.66 of React Native.
> 本节包含特定于 React Native v0.66 的信息。
The Codegen is typically invoked at build time, but you may find it useful to generate your native interface code on demand for troubleshooting.
通常在构建时调用 Codegen,但是您可能会发现按需生成本机接口代码以进行故障排除很有用。

If you wish to invoke the codegen manually, you have two options:
如果您希望手动调用 codegen,有两个选项:

1. Invoking a Gradle task directly (Android).
2. Invoking a script manually.
1. 直接调用 Gradle 任务(Android)。
2. 手动调用脚本。

### Android - Invoking a Gradle task directly
### Android - 直接调用 Gradle 任务

You can trigger the Codegen by invoking the following task:
您可以通过调用以下任务来触发 Codegen

```bash
./gradlew generateCodegenArtifactsFromSchema --rerun-tasks
```

The extra `--rerun-tasks` flag is added to make sure Gradle is ignoring the `UP-TO-DATE` checks for this task. You should not need it during normal development.
额外的 `--rerun-tasks` 标志被添加以确保 Gradle 忽略对该任务的 `UP-TO-DATE` 检查。在正常开发过程中,您不应该需要它。

The `generateCodegenArtifactsFromSchema` task normally runs before the `preBuild` task, so you should not need to invoke it manually, but it will be triggered before your builds.
`generateCodegenArtifactsFromSchema` 任务通常在 `preBuild` 任务之前运行,因此您不需要手动调用它,但它将在构建之前触发。

### Invoking the script manually
### 手动调用脚本

Alternatively, you can invoke the Codegen directly, bypassing the Gradle Plugin or CocoaPods infrastructure.
This can be done with the following commands.
或者,您可以直接调用 Codegen,绕过 Gradle 插件或 CocoaPods 基础设施。
可以使用以下命令完成此操作。

The parameters to provide will look quite familiar to you now that you have already configured the Gradle plugin or CocoaPods library.
现在您已经配置了 Gradle 插件或 CocoaPods 库,所以要提供的参数看起来会非常熟悉。

#### Generating the schema file
#### 生成模式文件

First, you’ll need to generate a schema file from your JavaScript sources. You only need to do this whenever your JavaScript specs change. The script to generate this schema is provided as part of the `react-native-codegen` package. If running this from within your React Native application, you can use the package from `node_modules` directly:
首先,您需要从 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>
```

> The source for the `react-native-codegen` is available in the React Native repository, under `packages/react-native-codegen`. Run `yarn install` and `yarn build` in that directory to build your own `react-native-codegen` package from source. In most cases, you will not want to do this as the guide assumes the use of the `react-native-codegen` package version that is associated with the relevant React Native nightly release.
> `react-native-codegen`的源代码可在 React Native 存储库中找到,位于`packages/react-native-codegen`目录下。如果需要从源代码构建自己的`react-native-codegen`包,请在该目录中运行 `yarn install` `yarn build`. 在大多数情况下,您不需要这样做。
#### Generating the native code artifacts
#### 生成原生代码构件

Once you have a schema file for your native modules or components, you can use a second script to generate the actual native code artifacts for your library. You can use the same schema file generated by the previous script.
一旦您拥有用于本地模块或组件的架构文件,您可以使用第二个脚本为库生成实际的原生代码构件。您可以使用前一个脚本生成的相同架构文件。

```bash
node node_modules/react-native/scripts/generate-specs-cli.js \
Expand All @@ -270,18 +270,18 @@ node node_modules/react-native/scripts/generate-specs-cli.js \
[--libraryType all(default)|modules|components]
```

> **NOTE:** The output artifacts of the Codegen are inside the build folder and should not be committed.
> They should be considered only for reference.
> **注意:** Codegen 的输出构件位于 build 文件夹中,不应提交到版本控制系统。
> 它们仅供参考。
##### Example
##### 示例

The following is a basic example of invoking the Codegen script to generate native iOS interface code for a library that provides native modules. The JavaScript spec sources for this library are located in a `js/` subdirectory, and this library’s native code expects the native interfaces to be available in the `ios` subdirectory.
以下是调用 Codegen 脚本的基本示例,用于为提供原生模块的库生成本机 iOS 界面代码。此库的 JavaScript 规范源文件位于`js/`子目录中,而该库的原生代码期望在`ios`子目录中可用原生接口。

```bash
# Generate schema - only needs to be done whenever JS specs change
# 生成模式 - 仅在JS规范更改时需要执行
node node_modules/react-native-codegen/lib/cli/combine/combine-js-to-schema-cli.js /tmp/schema.json ./js

# Generate native code artifacts
# 生成原生代码构件
node node_modules/react-native/scripts/generate-specs-cli.js \
--platform ios \
--schemaPath /tmp/schema.json \
Expand All @@ -290,12 +290,12 @@ node node_modules/react-native/scripts/generate-specs-cli.js \
--libraryType modules
```

In the above example, the code-gen script will generate several files: `MyLibSpecs.h` and `MyLibSpecs-generated.mm`, as well as a handful of `.h` and `.cpp` files, all located in the `ios` directory.
在上面的示例中,代码生成脚本将会生成几个文件:`MyLibSpecs.h` `MyLibSpecs-generated.mm`,以及一些 `.h` `.cpp` 文件,全部位于 `ios` 目录下。

## V. Note on Existing Apps
## V. 关于现有应用的注意事项

This guide provides instructions for migrating an application that is based on the default app template that is provided by React Native. If your app has deviated from the template, or you are working with an application that was never based off the template, then the following sections might help.
本指南提供了迁移基于 React Native 提供的默认应用模板的应用程序的说明。如果您的应用程序与模板有所偏离,或者您正在使用从未基于该模板构建过的应用程序,则以下部分可能会对您有所帮助。

### Finding your bridge delegate
### 查找桥接代理

This guide assumes that the `AppDelegate` is configured as the bridge delegate. If you are not sure which is your bridge delegate, then place a breakpoint in `RCTBridge` and `RCTCxxBridge`, run your app, and inspect `self.delegate`.
本指南假设`AppDelegate`被配置为桥接代理。如果您不确定哪个是您的桥接代理,请在`RCTBridge``RCTCxxBridge`中设置断点,运行您的应用,并检查 `self.delegate`.
Loading

0 comments on commit 3042c1d

Please sign in to comment.