React Native使用什么来允许JavaScript本地在iOS和Android上执行？

Question

React Native使用什么来覆盖iOS和Android？Cordova使用WebView有效地显示本机容器内的网页; React Native是否使用相同的方法？如果没有,它使用什么方法？

Answer 1

运行 Javascript 代码

React Native 在 Android/iOS 模拟器和设备上使用 JavaScriptCore（支持 Safari 的 JavaScript 引擎）。

对于 Android，React Native 将 JavaScriptCore 与应用程序捆绑在一起。

对于 iOS，React Native 使用 iOS 平台提供的 JavaScriptCore。

与 Android/iOS 通信

使用 React Native 桥（C++/Java 桥）。它负责本机线程和 Javascript 线程之间的通信。

在大多数情况下，开发人员会用 Javascript 编写整个 React Native 应用程序。要运行应用程序，请通过 CLI 发出以下命令之一 -react-native run-ios或react-native run-android. 此时，React Native CLI 会产生一个节点打包器/打包器，它将 JS 代码打包成一个main.bundle.js文件。可以认为打包器类似于 Webpack。现在，每当 React Native 应用程序启动时，要加载的第一个项目就是本机入口点。Native 线程产生运行捆绑的 JS 代码的 JS VM 线程。JS 代码具有应用程序的所有业务逻辑。Native 线程现在通过 RN Bridge 发送消息以启动 JS 应用程序。现在，生成的 Javascript 线程开始通过 RN Bridge 向本机线程发出指令。指令包括加载什么视图，从硬件中检索什么信息等。 来源

Answer 2

正如您注意到React Native不是基于Cordova.它不是一个看起来像应用程序铲入WebView的网站.

React Native使用JavaScript运行时,但UI不是HTML,也不使用WebView.您可以使用JSX和React Native特定组件来定义UI.

它提供了本机级别的性能和外观,但是必须为iOS和Android单独配置一些UI部件.例如,工具栏完全不同,但两个操作系统的TextInput可以相同.

Answer 3

2022 年更新

由于 React Native 最近发生了很大的变化，并且在不久的将来也会发生很大的变化，我认为是时候更新这个答案了：

需要了解的新组件：

爱马仕：

React Native 团队用 C++ 开发了自己的 Javascript 引擎，称为 Hermes。如果启用，Hermes 将作为执行 Javascript（而不是 JSC）的上下文随您的应用程序一起提供，承诺使您的应用程序包更小，并且应用程序的执行速度更快。

JSI（Javascript 接口）：

它是一个统一的、轻量级的、通用的层，适用于（理论上）任何 JavaScript 引擎。它与引擎一样用 C++ 实现，但与引擎解耦。这使得在 JS 线程上保存本机对象的引用成为可能，消除了对桥的需要，从而消除了对所有内容进行字符串化的需要，并使 React Native 的速度更快，因为字符串化是当前的瓶颈。它还使得 JS 引擎之间的切换变得更加容易。由于 JSI 是用 C++ 开发的，因此开发人员可以更轻松地在 Android 和 iOS 之间共享本机代码。例如，您可以使用 C++ 开发本机代码，并通过 JSI 的帮助从 Javascript 在 iOS 和 Android 上调用它。两个平台都可以执行 C++ 代码，iOS 可以通过 Objective C 轻松使用它，因为它是 C 的超集。Android 需要在 Android NDK（本机开发工具包）和 JNI（Java 本机接口，负责Java <=> C++ 翻译）。

Bridge 将分为两部分，阅读更多内容：

涡轮增压模块

这是一种与本机端交互的新方式，可与 JSI 互操作。它允许包的延迟初始化，从而使具有大量本机依赖项的应用程序的启动时间更短。

织物渲染器

UI 管理器的重新架构，可与 JSI 和 Turbo 模块互操作。Fabric 不再使用以前用于计算元素布局的 Shadow Tree（或 Shadow Thread）（它与桥耦合），而是可以使用新的强大的 JSI 功能来渲染 ui，而无需对任何内容进行字符串化。这将提供真正类似本机的性能。

附加功能：

代码生成

通过使用类型化的 JavaScript（Typescript 或 Flow）作为事实来源，我们可以生成 Fabric 和 TurboModules 所需的接口文件。

原问题的新答案：

React Native 在 Javascript 端使用 React 来允许开发人员开发应用程序。React Native 使用 Fabric 作为渲染器，而不是 HTML，这是 React 在 Web 上的渲染上下文，它是一个 C++ 渲染器，最终在 React Native 应用程序的 UI 线程（本机）上渲染真正的本机元素。与之前的模型不同，之前的模型使用 UI 线程和 JS 线程之间的桥接和字符串化在两者之间传递数据，实现了一个新的适配器层（称为 JSI），这使得在 JS 中保存 C++ 对象的引用成为可能。因此，React Native 应用程序的真实来源将保留在 C++ 世界中，允许本机端和 JS 端以同步方式在两者之间共享数据，而无需对任何内容进行字符串化。

Answer 4

在iOS模拟器和设备上,Android模拟器和设备React Native使用JavaScriptCore,它是为Safari提供动力的JavaScript引擎. 资源