Skip to main content

词汇表

开发菜单

¥Dev Menu

应用内开发者菜单(在开发版本中可用)可提供对各种开发和调试操作的访问。在文档中了解有关开发菜单的更多信息

¥The in-app developer menu (available in development builds) that offers access to various development and debugging actions. Learn more about the Dev Menu in the docs.

Fabric 渲染器

¥Fabric Renderer

React Native 执行与 Web 版 React 相同的 React 框架代码。然而,React Native 渲染到通用平台视图(宿主视图)而不是 DOM 节点(可以被认为是 Web 的宿主视图)。Fabric 渲染器可以渲染到宿主视图。Fabric 让 React 与每个平台对话并管理其主机视图实例。Fabric 渲染器存在于 JavaScript 中,并通过 C++ 代码提供可用的目标接口。在这篇博文中阅读有关 React 渲染器的更多信息。

¥React Native executes the same React framework code as React for the web. However, React Native renders to general platform views (host views) instead of DOM nodes (which can be considered web’s host views). Rendering to host views is made possible by the Fabric Renderer. Fabric lets React talk to each platform and manage its host view instances. The Fabric Renderer exists in JavaScript and targets interfaces made available by C++ code. Read more about React renderers in this blog post.

主机平台

¥Host platform

嵌入 React Native 的平台(例如 Android、iOS、macOS、Windows)。

¥The platform embedding React Native (e.g., Android, iOS, macOS, Windows).

主机视图树(和主机视图)

¥Host View Tree (and Host View)

主机平台(例如 Android、iOS)中视图的树表示。在 Android 上,宿主视图是 android.view.ViewGroupandroid.widget.TextView 等的实例,它们是宿主视图树的构建块。每个宿主视图的大小和位置基于 Yoga 计算的 LayoutMetrics,每个宿主视图的样式和内容基于 React Shadow Tree 的信息。

¥Tree representation of views in the host platform (e.g. Android, iOS). On Android, the host views are instances of android.view.ViewGroup, android.widget.TextView, etc. which are the building blocks of the host view tree. The size and location of each host view are based on LayoutMetrics calculated with Yoga, and the style and content of each host view are based on information from the React Shadow Tree.

JavaScript 接口 (JSI)

¥JavaScript Interfaces (JSI)

用于在 C++ 应用中嵌入 JavaScript 引擎的轻量级 API。Fabric 使用它在 Fabric 的 C++ 核心和 React 之间进行通信。

¥A lightweight API to embed a JavaScript engine in a C++ application. Fabric uses it to communicate between Fabric’s C++ core and React.

Java 原生接口 (JNI)

¥Java Native Interface (JNI)

用于编写 Java 原生方法的 API 用于在 Fabric 的 C++ 核心和 Android 之间进行通信,用 Java 编写。

¥An API to write Java native methods used to communicate between Fabric’s C++ core and Android, written in Java.

React 组件

¥React Component

指示如何创建 React 元素的 JavaScript 函数或类。在这篇博文中阅读有关 React 组件、元素的更多信息。

¥A JavaScript function or class that instructs how to create a React Element. Read more about React components, elements in this blog post.

React 复合组件

¥React Composite Components

具有 render 实现的 React 组件可简化为其他 React 复合组件或 React 主机组件。

¥React Components with render implementations that reduce to other React Composite Components or React Host Components.

React 主机组件或主机组件

¥React Host Components or Host Components

其视图实现由宿主视图提供的 React 组件(例如 <View>, <Text> )。在 Web 上,ReactDOM 的 Host 组件将是像 <p><div> 这样的组件。

¥React Components whose view implementation is provided by a host view (e.g., <View>, <Text> ). On the Web, ReactDOM's Host components would be components like <p> and <div>.

React 元素树(和 React 元素)

¥React Element Tree (and React Element)

React 元素树是由 React 在 JavaScript 中创建的,由 React 元素组成。React 元素是一个简单的 JavaScript 对象,它描述了屏幕上应该显示的内容。它包括属性、样式和子项。React 元素仅存在于 JavaScript 中,可以表示 React 复合组件或 React 主机组件的实例化。在这篇博文中阅读有关 React 组件和元素的更多信息。

¥A React Element Tree is created by React in JavaScript and consists of React Elements. A React Element is a plain JavaScript object that describes what should appear on the screen. It includes props, styles, and children. React Elements only exist in JavaScript and can represent instantiations of either React Composite Components or React Host Components. Read more about React components and elements in this blog post.

React Native 框架

¥React Native Framework

React Native 允许开发者使用 React 编程范式 将应用发送到原生目标。React Native 团队专注于创建适合开发原生应用时最常见用例的核心 API 和功能。

¥React Native allows developers to use the React programming paradigm to ship applications to native targets. The React Native team is focused on creating core APIs and functionalities that fit the most general use case when developing native apps.

将原生应用发布到生产环境通常需要一组工具和库,这些工具和库不是 React Native 默认提供的一部分,但对于将应用发布到生产环境仍然至关重要。此类工具的示例包括:支持将应用发布到专用存储或支持路由和导航机制。

¥Shipping native apps to production usually requires a set of tools and libraries that are not provided by default as part of React Native, but are still crucial to ship an app to production. Examples of such tools are: support for publishing applications to a dedicated store or support for routing and navigation mechanisms.

当这些工具和库被收集起来形成一个建立在 React Native 之上的有凝聚力的框架时,我们将其定义为 React Native 框架。

¥When those tools and libraries are collected to form a cohesive framework built on top of React Native, we define it as a React Native Framework.

开源 React Native 框架的一个示例是 Expo

¥An example of Open Source React Native Framework is Expo.

React Shadow 树(和 React Shadow 节点)

¥React Shadow Tree (and React Shadow Node)

React Shadow Tree 由 Fabric 渲染器创建,由 React Shadow Nodes 组成。React Shadow Node 是一个对象,代表要安装的 React Host 组件,并包含源自 JavaScript 的 props。它们还包含布局信息(x、y、宽度、高度)。在 Fabric 中,React Shadow Node 对象存在于 C++ 中。在 Fabric 之前,这些存在于移动运行时堆中(例如 Android JVM)。

¥A React Shadow Tree is created by the Fabric Renderer and consists of React Shadow Nodes. A React Shadow Node is an object that represents a React Host Component to be mounted, and contains props that originate from JavaScript. They also contain layout information (x, y, width, height). In Fabric, React Shadow Node objects exist in C++. Before Fabric, these existed in the mobile runtime heap (e.g. Android JVM).

Yoga 树(和 Yoga 节点)

¥Yoga Tree (and Yoga Node)

Yoga 使用 Yoga Tree 来计算 React Shadow Tree 的布局信息。每个 React Shadow Node 通常会创建一个 Yoga Node,因为 React Native 使用 Yoga 来计算布局。然而,这并不是一个硬性要求。Fabric 还可以创建不使用 Yoga 的 React Shadow Nodes;每个 React Shadow Node 的实现决定了如何计算布局。

¥The Yoga Tree is used by Yoga to calculate layout information for a React Shadow Tree. Each React Shadow Node typically creates a Yoga Node because React Native employs Yoga to calculate layout. However, this is not a hard requirement. Fabric can also create React Shadow Nodes that do not use Yoga; the implementation of each React Shadow Node determines how to calculate layout.