原生组件

¥Native Components

如果你想构建新的 React Native 组件来封装主机组件，例如 Android 上独特的 CheckBox 或 iOS 上的 UIButton，则应该使用 Fabric Native 组件。

¥If you want to build new React Native Components that wraps around a Host Component like a unique kind of CheckBox on Android, or a UIButton on iOS, you should use a Fabric Native Component.

本指南将向你展示如何通过实现 Web 视图组件来构建 Fabric 原生组件。执行此操作的步骤如下：

¥This guide will show you how to build Fabric Native Component, by implementing a web view component. The steps to doing this are:

使用 Flow 或 TypeScript 定义 JavaScript 规范。

¥Define a JavaScript specification using Flow or TypeScript.
配置依赖管理系统以从提供的规范生成代码并自动链接。

¥Configure the dependencies management system to generate code from the provided spec and to be auto-linked.
实现原生代码。

¥Implement the Native code.
在应用中使用组件。

¥Use the Component in an App.

你将需要一个普通的模板生成的应用来使用该组件：

¥You're going to need a plain template generated application to use the component:

npx @react-native-community/cli@latest init Demo --install-pods false

创建 WebView 组件

¥Creating a WebView Component

本指南将向你展示如何创建 Web 视图组件。我们将使用 Android 的 WebView 组件和 iOS 的 WKWebView 组件创建组件。

¥This guide will show you how to create a Web View component. We will be creating the component by using the Android's WebView component, and the iOS' WKWebView component.

让我们首先创建文件夹结构来保存我们组件的代码：

¥Let's start by creating the folders structure to hold our component's code:

mkdir -p Demo/{specs,android/app/src/main/java/com/webview}

这为你提供了以下工作布局：

¥This gives you the following layout where you'll working:

Demo
├── android/app/src/main/java/com/webview
└── ios
└── spec

android/app/src/main/java/com/webview 文件夹是包含我们的 Android 代码的文件夹。

¥The android/app/src/main/java/com/webview folder is the folder that will contain our Android code.
ios 文件夹是包含我们的 iOS 代码的文件夹。

¥The ios folder is the folder that will contain our iOS code.
spec 文件夹是包含 Codegen 规范文件的文件夹。

¥The spec folder is the folder that will contain the Codegen's specification file.

1. 为 Codegen 定义规范

¥ Define Specification for Codegen

你的规范必须在 TypeScript 或 Flow 中定义（有关更多详细信息，请参阅 Codegen 文档）。Codegen 使用它来生成 C++、Objective-C++ 和 Java，以将你的平台代码连接到 React 运行的 JavaScript 运行时。

¥Your specification must be defined in either TypeScript or Flow (see Codegen documentation for more details). This is used by Codegen to generate the C++, Objective-C++ and Java to connect your platform code to the JavaScript runtime that React runs in.

规范文件必须命名为 <MODULE_NAME>NativeComponent.{ts|js} 才能与 Codegen 一起使用。后缀 NativeComponent 不仅是一种约定，它实际上被 Codegen 用来检测规范文件。

¥The specification file must be named <MODULE_NAME>NativeComponent.{ts|js} to work with Codegen. The suffix NativeComponent is not only a convention, it is actually used by Codegen to detect a spec file.

将此规范用于我们的 WebView 组件：

¥Use this specification for our WebView Component:

TypeScript
Flow

Demo/specs/WebViewNativeComponent.ts
import type {HostComponent, ViewProps} from 'react-native';
import type {BubblingEventHandler} from 'react-native/Libraries/Types/CodegenTypes';
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';

type WebViewScriptLoadedEvent = {
  result: 'success' | 'error';
};

export interface NativeProps extends ViewProps {
  sourceURL?: string;
  onScriptLoaded?: BubblingEventHandler<WebViewScriptLoadedEvent> | null;
}

export default codegenNativeComponent<NativeProps>(
  'CustomWebView',
) as HostComponent<NativeProps>;

Demo/RCTWebView/js/RCTWebViewNativeComponent.js
// @flow strict-local

import type {HostComponent, ViewProps} from 'react-native';
import type {BubblingEventHandler} from 'react-native/Libraries/Types/CodegenTypes';
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';

type WebViewScriptLoadedEvent = $ReadOnly<{|
  result: "success" | "error",
|}>;

type NativeProps = $ReadOnly<{|
  ...ViewProps,
  sourceURL?: string;
  onScriptLoaded?: BubblingEventHandler<WebViewScriptLoadedEvent>?;
|}>;

export default (codegenNativeComponent<NativeProps>(
  'CustomWebView',
): HostComponent<NativeProps>);

此规范由三个主要部分组成，不包括导入：

¥This specification is composed of three main parts, exluding the imports:

WebViewScriptLoadedEvent 是事件需要从原生传递到 JavaScript 的数据的支持数据类型。

¥The WebViewScriptLoadedEvent is a supporting data type for the data the event needs to pass from native to JavaScript.
NativeProps 是我们可以在组件上设置的 props 的定义。

¥The NativeProps which is a definitions of the props that we can set on the component.
codegenNativeComponent 语句允许为自定义组件生成代码，并定义用于匹配原生实现的组件名称。

¥The codegenNativeComponent statement that allows to codegenerate the code for the custom component and that defines a name for the component used to match the native implementations.

与原生模块一样，你可以在 specs/ 目录中拥有多个规范文件。有关你可以使用的类型以及这些映射的平台类型的更多信息，请参阅 appendix。

¥As with Native Modules, you can have multiple specification files in the specs/ directory. For more information about the types you can use, and the platform types these map to see the appendix.

2. 配置 Codegen 以运行

¥ Configure Codegen to run

React Native 的 Codegen 工具使用该规范为我们生成特定于平台的接口和样板。为此，Codegen 需要知道在哪里找到我们的规范以及如何处理它。更新你的 package.json 以包含：

¥The specification is used by the React Native's Codegen tools to generate platform specific interfaces and boilerplate for us. To do this, Codegen needs to know where to find our specification and what to do with it. Update your package.json to include:

     "start": "react-native start",
     "test": "jest"
   },
   "codegenConfig": {
     "name": "AppSpec",
     "type": "components",
     "jsSrcsDir": "specs",
     "android": {
       "javaPackageName": "com.nativelocalstorage"
     }
   },
   "dependencies": {

为 Codegen 连接好所有内容后，我们需要准备原生代码以挂接到我们生成的代码中。

¥With everything wired up for Codegen, we need to prepare our native code to hook into our generated code.

2. 构建你的原生代码

¥ Building your Native Code

现在是时候编写原生平台代码了，这样当 React 需要渲染视图时，平台就可以创建正确的原生视图并将其渲染到屏幕上。

¥Now it's time to write the native platform code so that when React requires to render a view, te platform can create the right native view and can render it on screen.

你应该同时使用 Android 和 iOS 平台。

¥You should work through both the Android and iOS platforms.

注意

本指南向你展示如何创建仅适用于新架构的原生组件。如果你需要同时支持新架构和旧架构，请参考我们的向后兼容性指南。

¥This guide shows you how to create a Native Component that only works with the New Architecture. If you need to support both the New Architecture and the Legacy Architecture, please refer to our backwards compatibility guide.

Android
iOS

    <FabricNativeComponentsAndroid />

    <FabricNativeComponentsIOS />

3. 使用你的原生组件

¥ Use your Native Component

最后，你可以在应用中使用新组件。更新你生成的 App.tsx 以：

¥Finally, you can use the new component in your app. Update your generated App.tsx to:

Demo/App.tsx
import React from 'react';
import {Alert, StyleSheet, View} from 'react-native';
import WebView from './specs/WebViewNativeComponent';

function App(): React.JSX.Element {
  return (
    <View style={styles.container}>
      <WebView
        sourceURL="https://react.nodejs.cn/"
        style={styles.webview}
        onScriptLoaded={() => {
          Alert.alert('Page Loaded');
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    alignContent: 'center',
  },
  webview: {
    width: '100%',
    height: '100%',
  },
});

export default App;

此代码创建一个应用，该应用使用我们创建的新 WebView 组件来加载 react.dev 网站。

¥This code creates an app that uses the new WebView component we created to load the react.dev website.

加载网页时，应用还会显示警报。

¥The app also shows an alert when the web page is loaded.

4. 使用 WebView 组件运行你的应用

¥ Run your App using the WebView Component

Android
iOS

yarn run android

yarn run ios

安卓	iOS

创建 WebView 组件​

1. 为 Codegen 定义规范​

2. 配置 Codegen 以运行​

2. 构建你的原生代码​

3. 使用你的原生组件​