什么是React Native

React Native 是一个由 Facebook 于 2015 年 9 月发布的一款开源的 JavaScript 框架，它可以让开发者使用 JavaScript 和 React 来开发跨平台的移动应用。它既保留了 React 的开发效率，又同时拥有 Native 应用的良好体验，加上 Virtual DOM 跨平台的优势，实现了真正意义上的：Learn Once,Write Anywhere.

Create native apps for Android, iOS, and more using React React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces. Use a little—or a lot. You can use React Native today in your existing Android and iOS projects or you can create a whole new app from scratch. 使用React来创建Android和iOS的原生应用 React Native将原生开发的最佳部分与React相结合，致力于成为构建用户界面的顶尖 JavaScript 框架。 酌量添加，多少随意。 随时都可以把 React Native 无缝集成到你已有的 Android 或 iOS 项目，当然也可以完全从头焕然一新地重写。

根据官网的介绍我们可以了解到React Native 是一个基于 javascript 的框架，用于创建本地移动 Android 和 iOS 平台应用程序。它基于 Facebook 的 JavaScript 库 React，为移动平台创建用户界面。网络开发人员可以使用 React Native JavaScript 编写 Android 和 iOS 应用程序，这些程序的操作和外观都与本地应用程序相似。使用 React Native 编写的代码也可以跨平台共享，这允许 iOS 和 Android 同时进行高效开发。

React Native 应用程序是通过结合 JavaScript 和 xml 类型的标记(即 JSX)创建的。React Native 桥接负责在 Java (针对 Android)和Swift (针对 iOS)中执行 api 的本地呈现。应用程序使用移动用户界面组件而不是 web 视图进行渲染，其工作方式与其他移动应用程序类似。React Native 可以显示平台 api 的 JavaScript 接口。因此，React Native 应用程序可以访问移动平台的功能，如用户位置和手机摄像头。

React Native 提供了对 Android 和 iOS 移动平台的支持，将来可能会扩展到其他平台。在这个框架中编写的大多数代码都是跨平台的，这有助于开发人员节省时间和减少编码工作。

React Native和React的区别

• React是一个用于构建页面的渐进式UI库。React 的主要目标是最大程度地减少开发人员构建 UI 时发生的错误。它通过使用组件——描述部分用户界面的、自包含的逻辑代码段——来实现此目的。
• React Native是驱动android/ios原生组件渲染。其实在React Native推出之前，就已经存在这种使用js驱动app原生组件的技术了，比如Native Script。React Native因为是原生渲染所以组件也样式上和React有些许不同可参考官网进行开发。

React Native实现原理

React Native 是使用的原生渲染即Native view，而不是WebView，JavaScript代码没有被编译器Native代码，其实是将代码编译到一个一个bundule.js的文件中供渲染引擎JSC(JavaScriptCore)去渲染。之前老的架构版本JavaScript和Native的通信也是用到上篇文章中提到的Bridge去通信，在React Native 0.68版本新的架构使用JSI（JavaScriptInterface）后面会详细介绍，同时还有Fabric、Turo Module和CodeGen等概念。

下面是React Native的架构图：

Bridge

在React Native中Bridge是使用Java/C++开发的，功能主要是给RN内嵌的引擎提供原始接口扩展能力。比如蓝牙、相机、截屏等功能。它允许JS和Native通过一个自定义的通信协议来通信，通过一下序列号的JSON来传输信息，所以Bridge的通信是异步的。

JSI

新架构中Bridge会被一个叫做JavaScript Interface（JSI）的模块取代。JSI是一个用C++编写的轻量的通用层，JS引擎可通过它直接调用Native侧的代码。

老架构中Bridge只能和特定的JS引擎（JSC）一起工作，新架构中JSI和JS引擎进行了解耦，意味着可以使用其他JS引擎如，Chakra, v8, Hermes。

Turbo Modules

在之前的架构中存在一个问题，就是在整个RN应用在初始化的时候，JS中可以使用的所有的原生模块都会被初始化化，为了优化启动速度，Turbo Modules可以做到原生模块让JS按需引用，在初始化的时候只初始化引用的原生模块，减少启动时间。

CodeGen

JavaScript是一种动态类型语言，而JSI是用C++编写的，它是一种静态类型语言。因此，需要确保两者之间的顺畅通信。这就是为什么新架构还将包括一个名为 CodeGen 的静态类型检查器。CodeGen使用JavaScript组件的Props作为类型声明来源来生成C++ structs。当发生类型不匹配时会触发编译错误。

Fabric

Fabric 是 React Native 新架构的渲染系统，是从老架构的渲染系统演变而来的。核心原理是在 C++ 层统一更多的渲染逻辑，提升与宿主平台（host platforms）互操作性，并为 React Native 解锁更多能力。其研发始于 2018 年。从 2021 年开始， Facebook App 中的 React Native 启用了新的渲染器。 Fabric 渲染器（Fabric Renderer）：React Native 执行的 React 框架代码，和 React 在 Web 中执行代码是同一份。但是，React Native 渲染的是通用平台视图（宿主视图）而不是 DOM 节点（可以认为 DOM 是 Web 的宿主视图）。 Fabric 渲染器使得渲染宿主视图变得可行。Fabric 让 React 与各个平台直接通信并管理其宿主视图实例。 Fabric 渲染器存在于 JavaScript 中，并且它调用的是由 C++ 代码暴露的接口。在这篇文章中有更多关于 React 渲染器的信息。

使用案例

环境搭建可参考官网的环境搭建

例如实现一个滚动的窗口，会写React就可以写React Native：

import React from 'react';
import { StyleSheet, Text, SafeAreaView, ScrollView, StatusBar } from 'react-native';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView style={styles.scrollView}>
        <Text style={styles.text}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </Text>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: StatusBar.currentHeight,
  },
  scrollView: {
    backgroundColor: 'pink',
    marginHorizontal: 20,
  },
  text: {
    fontSize: 42,
  },
});

export default App;

Weex

跟React Native实习原来相同的还有Weex。Week是阿里巴巴于 2016 年发布的跨平台移动端开发框架，思想及原理和 React Native 类似，底层都是通过原生渲染的，不同是应用层开发语法 （即 DSL，Domain Specific Language）：Weex 支持 Vue 语法和 Rax 语法，Rax 的 DSL(Domain Specific Language) 语法是基于 React JSX 语法而创造，而 RN 的 DSL 是基于 React 的，不支持 Vue。有兴趣的可以了解一下。

小结

• 相对于上篇提到的混合开发RN的用户体验更接近于原生体验
• RN的开发基于React，跟混合开发的H5相比难度相近，所以针对不同的开发者上手较快。
• RN新版本架构中的JSI一定程度上解决了老版架构中使用Bridge通信带来的大量实时交互能力不足的问题。