什么是 React Native 框架及其功能
已发表: 2022-07-08React Native 是跨平台应用程序开发最受青睐的框架之一，已被多家行业巨头采用，包括 Facebook、Instagram、Skype、Microsoft、Tesla、Shopify、Walmart 和 UberEats。 该框架由 Facebook 团队创建，旨在解决 React.js 的局限性。
Facebook 开发的 SDK React 是构建 Web 应用程序的可行选择。 然而，当 Facebook 采用移动优先策略时，需要将 Web 应用程序渲染到移动平台。 这个任务确实很有挑战性！ 起初，Facebook 工程师使用 HTML5 在移动 Web 上渲染应用程序，但这种策略失败了。 此后，他们将 WebView 嵌入到移动原生容器中。 由于缺少手势和触摸事件、键盘 API 和图像管理能力等必要属性，这种方法也不可行。
然后，他们意识到需要构建原生应用程序以提供无可挑剔的用户体验。 但是，分别为 Android 和 iOS 构建原生应用程序的想法涉及障碍——命令式编码过程、针对不同平台的独立代码库以及缓慢的迭代过程，因为每个应用程序的原型都需要 Playstore 的事先批准。
最后，Facebook 进行了内部黑客马拉松，并创造了 React Native 的改进版本。 React Native 框架于 2015 年推出，作为移动应用开发的一站式解决方案，并于同年开源。 让我们探索更多关于框架及其功能的信息！
React Native：概述
React Native 是一个基于 JavaScript 的移动应用程序开发框架，用于为 Android 和 iOS 操作系统制作原生渲染的移动应用程序。 React Native 的独特卖点在于开发人员可以使用单个代码库同时为两个平台构建应用程序。 该框架通过将 JS 代码编译为本机组件来使用特定于平台的模块和 API。 因此，React Native 开发人员可以使用 Text、View 和 Images 等原生组件作为构建块来创建新组件。
React Native 与 React 有何不同？
React Native 基于 React for web，这是 Facebook 开发的用于开发 UI 的 JS 库。 但是，虽然 React 以浏览器为目标，但 React Native 以移动应用程序平台为目标。 因此，移动应用程序开发人员喜欢使用已知的 JavaScript 库来创建具有原生外观和感觉的移动应用程序的便利。
React Native 使用 Text 原语代替了用于 Web 的 span 原语。 此 Text 会生成用于 Android 应用程序的本机 TextView 和用于 iOS 应用程序的本机 iOS UIView。 出于这个原因，尽管使用 JavaScript 进行应用程序开发，但最终应用程序并不是嵌入在移动应用程序外壳中的 Web 应用程序，而是真正原生的移动应用程序。
React Native 应用程序是使用 JSX 创建的，它是 JavaScript 和 XML-esque 标记的组合，就像 React 应用程序一样。 不同之处在于 React Native 在底层使用了一个“桥”来调用原生渲染 API。 在这里，Objective-C/Swift API 用于在 iOS 应用上渲染 UI 组件，而 Java/Kotlin API 用于 Android 应用。 简单地说，桥将 JS 代码转换为特定于平台的组件。 结果，应用程序呈现真实的移动 UI 组件而不是 Web 视图； 赋予移动应用程序的外观和感觉。 此外，React Native 公开了平台 API 的 JS 接口； 这使应用程序能够访问智能手机设备的功能，例如用户的当前位置、相机等。
React Native 应用程序如何运作？
React Native 应用程序分为三个不同的部分——原生代码、JavaScript 代码和桥接器。 桥接解释 JS 代码以在本机平台上执行它，并启用本机元素和 JS 代码之间的异步通信。
参与 React Native 应用程序运行的重要线程
Main（Native）线程：主线程，也称为 Native 线程，用于 iOS 和 Android 应用程序中的 UI 渲染。 它管理显示 UI 元素和处理用户手势的任务。
JavaScript 线程： JS 线程主要处理应用程序的业务逻辑并定义结构以及 UI 功能。 JS 线程的功能包括在单独的 JS 引擎中执行 JS 代码、进行 API 调用、处理触摸事件等。
影子线程（Shadow Tree）：该线程生成影子节点并充当数学引擎，使用算法将布局更新转换为准确的数据，并将 UI 事件转换为正确序列化的有效负载。
原生模块线程：每当应用程序需要访问平台 API 时，该过程都会在原生模块线程中进行。
自定义本机模块线程：此类线程用于在使用自定义模块时加速应用程序的性能。 例如，React Native 使用单独的本机线程处理动画，以便从 JS 线程中卸载此任务。
在上述线程中，帮助 React Native 应用运行的最重要的线程是 Native 线程和 JS 线程。 有趣的是，这两个线程之间没有直接通信，因此它们不会相互阻塞。
React Native 应用程序的功能：关键步骤
看看 React Native 应用程序是如何工作的！
步骤1
当应用程序启动时，Native 线程会加载应用程序并生成 JavaScript 线程以执行 JS 代码。 Native 线程监听到触摸、按下等 UI 事件，并通过 React Native 桥接器将这些事件传递给 JS 线程。
第2步
JavaScript 加载并且 JS 线程向影子线程发送有关必须在屏幕上呈现的内容的信息。 阴影线程然后使用算法计算布局并决定如何计算视图位置。 然后阴影线程将布局参数传递给主线程以渲染视图。 )
步骤#3
主线程收集 UI 事件并将它们发送到影子线程。 事件被转换成序列化的有效载荷并发送到 JS 线程。
第4步
JavaScript 线程现在处理有效负载，然后更新 UI 或调用本机方法。
每次迭代 JavaScript 的事件循环时，步骤 #2、步骤 #3 和步骤 #4 都会不断重复。
在 JS 线程中的每个事件循环完成后，原生端接收到对原生视图的批量更新； 然后这些在本机线程中执行。 请记住，批量更新应该在渲染下一帧的截止日期之前由 JS 线程发送到 Native 线程，以保持应用程序的性能。 由于 JS 事件循环中的复杂处理导致缓慢的 JS 线程阻碍了 UI。 慢 JS 线程不影响性能的唯一例外是在原生视图完全发生在原生线程中的情况下。
React Native Bridge 如何确保线程之间的顺畅交互？
React Native Bridge 允许线程之间的异步通信，这样一个线程就不会阻塞另一个线程。 此外，消息是批处理的——消息以优化的方式在线程之间传输。 此外，网桥对消息进行序列化，这样两个线程就不能共享相同的数据或使用相同的数据进行操作。
如何搭建 React Native App 开发环境？
以下是如何设置环境以在 Expo 的帮助下创建 React Native 应用程序。
- 安装Node.js，获取Expo的命令行工具，然后输入命令npm install Expo-cli –global。 一旦安装了 Expo cli 工具，输入 expo init todo-app。
- 现在将显示一个屏幕，您需要为空白应用程序选择“空白”选项。 还包括 Expo 的工作流程功能。 然后，输入您的应用名称，按回车键，然后继续设置过程。
- 导航到创建的新项目，使用命令 npm start 启动应用程序并停止应用程序，您需要按 Cntrl + C。开发人员的服务器将运行，并在 Web 浏览器中打开一个具有 Expo 管理器屏幕的新选项卡。
该应用程序可以通过在Android模拟器上运行或在手机上安装Expo应用程序并通过扫描二维码在设备上运行应用程序来预览。 此后，您需要安装一个文本编辑器，如 Atom、Sublime、Visual Studio Code 等。现在您已经拥有了创建 React Native 应用程序所需的所有工具。
最终判决
如果您需要构建面向 Android 和 iOS 操作系统的移动应用程序，React Native 是一个有利可图的选择。 使用 React Native 进行跨平台开发可加快您的开发速度并降低开发成本。 因此，该框架最适合打算构建快速应用原型以验证应用创意的企业家。
需要有关 React Native 应用程序开发的技术帮助和专家指导？ 联系 Biz4Solutions，这是一家在美国和印度拥有丰富经验的 React Native 开发公司，为全球客户提供世界一流的服务。