React Native 原理与实践

标签: react native 原理 | 发表时间:2021-01-11 10:49 | 作者:字节前端
出处:https://juejin.cn/frontend

React Native 介绍

什么是 React Native?

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

注:非高清 logo,这不是原子结构模型吗?暗示 React (Native)是万恶之源?

React Native 的特点

跨平台

React Native 使用了 Virtual DOM(虚拟 DOM),只需编写一套代码,便可以将代码打包成不同平台的 App,极大提高了开发效率,并且相对全部原生开发的应用来说,维护成本也相对更低。

上手快

相比于原生开发,JavaScript 学习成本低、语法灵活。允许让 Web 开发者更多地基于现有经验开发 App。React Native 只需使用 JavaScript 就能编写移动原生应用,它和 React 的设计理念是一样的,因此可以毫不夸张地说:你如果会写 React,就会写 React Native!

原生体验

由于 React Native 提供的组件是对原生 API 的暴露,虽然我们使用的是 JavaScript 语言编写的代码,但是实际上是调用了原生的 API 和原生的 UI 组件。因此,体验和性能足以媲美原生应用。

热更新

React Native 开发的应用支持热更新,因为 React Native 的产物是 bundle 文件,其实本质上就是 JS 代码,在 App 启动的时候就会去服务器上获取 bundle 文件,我们只需要更新 bundle 文件,从而使得 App 不需要重新前往商店下载包体就可以进行版本更新,开发者可以在用户无感知的情况下进行功能迭代或者 bug 修复。但是值得注意的是,AppStore 禁止热更新的功能中有调用私有 API、篡改原生代码和改变 App 的行为。

React Native 原理

JavaScriptCore

JavaScriptCore 是 JavaScript 引擎,通常会被叫做虚拟机,专门设计来解释和执行 JavaScript 代码。在 React Native 里面,JavaScriptCore 负责 bundle 产出的 JS 代码的解析和执行。

JS Engine

React Native 需要一个 JS 的运行环境,因为 React Native 会把应用的 JS 代码编译成一个 JS 文件(x x.bundle),React Native 框架的目标就是解释运行这个 JS 脚本文件,如果是 Native 拓展的 API,则直接通过 bridge 调用 Native 方法,最基础的比如绘制 UI 界面,映射 Virtual DOM 到真实的 UI 组件中。

绿色的是我们应用开发的部分,我们写的代码基本上都是在这一层。

蓝色代表公用的跨平台的代码和工具引擎,一般我们不会动蓝色部分的代码。

黄色代表平台相关的 bridge 代码,做定制化的时候会添加修改代码。

红色代表系统平台的功能,另外红色上面有一个虚线,表示所有平台相关的东西都通过 bridge 隔离开来了,红色部分是独立于 React Native 的。

脱离 React Native,纯原生端是如何与 JS 交互的?来看下 iOS 里面是如何实现的。

在 Native 创建一个 JS 上下文:

   // 创建一个ctx的JS上下文
JSContent *ctx = [[JSContent alloc] init];
// 创建一个变量name
[ctx evaluateScript:@"var name = 'Hellen'"];
// 创建一个方法
[ctx evaluateScript:@"var hello = function(name) { return 'hello ' + name }"];
复制代码

Native 调用 JavaScript 方法:

   // 通过ctx上下文对象,获取到hello方法
JSValue *helloFUnction = ctx[@"hello"];
// 运行js方法
JSValue *greetings = [helloFunction callWithArguments:@[@"bytedancers"]; // hello bytedancers
复制代码

所以,JavaScript 代码只要将变量暴露在 JS 上下文全局,Native 就能获取到,并运行 JS 的代码。

JavaScript 调用 Native,首先需要在 Native 端,将一个变量暴露在 JS 上下文全局,在 JavaScript 全局变量里面就能获取到并执行这个方法:

   ctx[@"createdByNative"] = ^(NSString *name) {
    // do something
    return someResult
}
复制代码

React Native 同样借助 JS Engine 的能力,基于 JavaScriptCore 来执行 JS,但是是通过 Bridge 来进行交互的,JS 不会直接引用 Native 层的对象实例,Native 也不会直接引用 JS 层的对象实例(在 React Native 里所有 Native 和 JS 互调都是通过 Bridge 层的几个最基础的方法衔接的)。

Hermes Engine

Hermes 是 Facebook 在 2019 年发布的新一代 JS Engine,Hermes 是一款小巧轻便的 JavaScript 引擎,专门针对在 Android 上运行 React Native 进行了优化:应用启动时间减少、减少内存使用量并缩小应用程序大小,此外因为它采用 JavaScript 标准实现,所以很容易在 React Native 应用中集成。

Hermes vs JavaScriptCore vs V8

经过官方的数据验证,Faceback 团队提出的关键性指标相较于原先的 JavaScriptCore 方案都有了显著提高。首先,是产物文件的大小方面,RN 所依赖的必要 so 库,Hermes 比 JavaScriptCore 减少了约 16%,V8 则要远大于 Hermes 和 JavaScriptCore。

Bridge

在 React Native 中,原生端和 JavaScript 交互是通过 Bridge 进行的,Bridge 的作用就是给 React Native 内嵌的 JS Engine 提供原生接口的扩展供 JS 调用。所有的本地存储、图片资源访问、图形图像绘制、3D 加速、网络访问、震动效果、NFC、原生控件绘制、地图、定位、通知等都是通过 Bridge 封装成 JS 接口以后注入 JS Engine 供 JS 调用。理论上,任何原生代码能实现的效果都可以通过 Bridge 封装成 JS 可以调用的组件和方法, 以 JS 模块的形式提供给 RN 使用。

RCTRootView

原生项目如果想用 React Native,那么就需要用到 RCTRootView,它是 React Native 加载的地方,可以把它看作是一个容器。

   // RCTRootView.m

- (void)javaScriptDidLoad:(NSNotification *)notification
{
  RCTAssertMainQueue();
  RCTBridge *bridge = notification.userInfo[@"bridge"];
  if (bridge != _contentView.bridge) {
    [self bundleFinishedLoading:bridge];
  }
}

- (void)bundleFinishedLoading:(RCTBridge *)bridge
{
  // 省略创建RCTRootContentView...

  [self runApplication:bridge];

  // 省略添加一个RCTRootContentView...
}

- (void)runApplication:(RCTBridge *)bridge
{
  NSString *moduleName = _moduleName ?: @""; // 这里是@"NewProject"
  NSDictionary *appParameters = @{
    @"rootTag": _contentView.reactTag,
    @"initialProps": _appProperties ?: @{},
  };

  [bridge enqueueJSCall:@"AppRegistry"
                 method:@"runApplication"
                   args:@[moduleName, appParameters]
             completion:NULL];
}
复制代码

上面的源码(iOS)可以看出 RCTRootView 其实做了这些事情:

  • 创建了负责 React Native 和 Native 通信的 RCTBridge 实例的初始化。
  • 初始化了真正展示视图的 RCTRootContentView。
  • 通过 runApplication 方法把必要的参数(moduleName, params)传给 JS 侧的 AppRegistry 的 runApplication 方法,从而运行起了 React Native 的功能。(在 React native 中,根组件是需要通过 AppRegistry 的 registerComponent 方法进行注册的。所谓根组件,就是 Native to JS 的入口文件)

渲染过程:

React Native 中的 Native 模块如何暴露给 JS?

我们知道,React Native 可以调用 Native 侧的方法,并且只要 Native 侧只要遵循一定的规则,是可以将方法暴露给 JS 调用的:

   // iOS端原生代码
#import 
#import 

@interface NativeLogModule : NSObject

@end

#import "NativeLogBridge.h"

@implementation NativeLogModule
RCT_EXPORT_MODULE()
RCT_EXPORT_METHOD(nativeLog:(id)obj) {
  NSLog(@"%@",obj);
}
@end

// JS端调用
import { NativeModules } from 'react-native';
NativeModules.NativeLogModule.nativeLog('从JS侧来的消息');
复制代码

可以看到,上面的代码中使用了 RCT_EXPORT_MODULE() 宏将 Native 类以 module 的形式暴露给了 JS,然后使用了 RCT_EXPORT_METHOD将 Native 的方法暴露给 JS,最后在 JS 侧直接引用一个模块,便可以直接调用暴露的方法与 Native 通信。

React Native 是如何实现 Native <---> JS 通信的呢?

上面我们有提到 JS Engine,Native 可以把原生方法暴露到全局,同样的 JS 也可以把方法暴露给 Native,但是 React Native 并没有这样做,原因之一是这样会导致大量的全局变量污染,所以为了规范这个通信过程,React Native 自己实现了 Bridge。

Native 调用 JS

在 React Native 里面,JS 的方法可以通过 global.batchedBridge.callFunctionReturnFlushedQueue 这个方法进行调用,所以在 Native 侧,只需将 React Native 里面的 global.batchedBridge 对象中的方法和 Native 侧的 JSIExecutor 方法进行绑定(本质上 Native 指针指向 JS 函数)

   JSIExecutor::callFunctionReturnFlushedQueue_ = global.batchedBridge.callFunctionReturnFlushedQueue
复制代码

Native 侧的 callFunctionReturnFlushedQueue 主要做了这样的事情:

  • 通过 moduleid 和 methodid 完成方法的调用,通过这两个参数可以找到 JS 侧定义的方法模块。

JS 调用 Native

当 JS 调用 Native 模块的时候,会调用一个 Native 暴露出来的全局方法:nativeFlushQueueImmediate,并通过传入要调用的 moduleName 、methodName、callback 参数给这个方法,然后这个方法再通知给 Native 侧找到相应的模块并执行。

Virtual DOM

在认识 Virtual DOM 之前,我们先来看看浏览器的工作原理:

  • 浏览器有一套完整的 UI 控件,样式和功能都是按照 HTML 标准实现的。
  • 浏览器能够解析 HTML 和 CSS,通过 HTML 告诉浏览器需要生成什么类型的 UI 控件,并通过 CSS 样式文件来描述该 UI 控件的外观(大小,背景,布局等等...)。
  • 浏览器的主要作用就是解析 HTML 和 CSS 来形成渲染树,并通过 Render Engine 将页面渲染出来。

了解浏览器的工作原理之后,Virtual DOM 是如何工作的?

  • 首先 Virtual DOM 和真实 DOM 都有一个共同点:都是用来描述页面 UI 控件。
  • Virtual DOM 具有平台无关性:它描述的 UI 控件只是数据结构层的,具体渲染工作是交给了原生渲染引擎(浏览器、iOS、Android)去处理。

React (Native)的 Virtual DOM

在 React Native 里面,是如何把 Virtual DOM 渲染成真实的 UI 的呢?

首先,在 React 里面,用来表示 dom 属性的对象有以下关键属性:

   var ele = {
    ...
    type: type, // 元素的类型
    key: key, // 元素key标示
    ref: ref, // 元素的引用
    props: props, // 元素的参数,包含children
    ...
}

// example 1
    
hello
// 会被描述为 {type: 'div', props: { children: ['hello'] } } // example 2 // 会被描述为 { type: CustomerComponents } 复制代码

React 里面的 Virtual DOM 把真实 DOM 分为了以下几种类型:

  • 原子类型

    • 类型为字符串,结构上不可再分解,渲染由平台底层支持。
    • 在浏览器端:原子类型表示为浏览器支持的原始标签,例如 div、ul、li、p、a、span 等等。
    • 在 Native 端:原子类型表示为 Native 端的各种基础 UI 组件,例如 RCTText、RCTView 等等
  • 组合类型

    • 类型为函数构造器,它给我们提供了一种自定义元素 UI 和行为的能力,当渲染器遇到组合类型的元素时,会使用它的构造器创建一个实例并运行 render 方法得到一个新元素(原子类型,或者组合类型),然后再拿该元素继续进行渲染或者分解。
    • 用户自定义的组件元素。

渲染器

在浏览器端和 Native 端,React (Native)中 Virtual DOM 用来渲染真实 DOM 的渲染器是不一样的:

在浏览器端:

   // 文本类型渲染器工作原理
mountComponent: function(
    transaction,
    hostParent,
    hostContainerInfo,
    context
) {
    // 获取到DOM对象
    var lazyTree = DOMLazyTree(ownerDocument.createDocumentFragment());
    // 判断是不是文本类型
    if (this._stringText) {
        DOMLazyTree.queueChild(
            lazyTree,
            DOMLazyTree(ownerDocument.createTextNode(this._stringText))
        );
    }
    return lazyTree
}

// 原子类型渲染器工作原理
mountComponent: function(
    transaction,
    hostParent,
    hostContainerInfo,
    context
) {
    var ownerDocument = hostContainerInfo._ownerDocument;
    // 创建原子type类型dom
    var el = 
ownerDocument.createElement(this._currentElement.type)
    ...

    // 创建子节点
    this._createInitialChildren(transaction, props, context, lazyTree);
    ...
}

// 组合类型渲染器工作原理
mountComponent: function(
    transaction,
    hostParent,
    hostContainerInfo,
    context
) {

    // 运行构造器,获取到组件实例

    var inst = this._constructComponent({
        doConstruct,
        publicProps,
        publicContext,
        updateQueue,
    });

    ...

    // 获取到虚拟dom
    if (renderedElement === undefined) {
      renderedElement = this._renderValidatedComponent();
    }

    ...

    // 获取到分解后的组件类型(ReactXXXComponent,可以看作是三种组件类型的集合)
    this._renderedComponent = this._instantiateReactComponent(
      renderedElement
    );
    // 最后通过ReactReconciler.mountComponent间接的调用不同类型的渲染器的mountComponent方法获取到生产的node节点,并返回。
    var markup = ReactReconciler.mountComponent(
      this._renderedComponent,
      rootID,
      transaction,
      this._processChildContext(context)
    );

    return markup
}
复制代码

看以下代码结构:

在 Native 端:

在浏览器里面,JavaScript 可以调用 DOM API 去完成创建 UI 的工作,而在 React Native 里面,是通过 UI Manager 来创建视图的,基于 Virtual DOM ,React Native 把不同平台创建视图的逻辑封装了一层,不同平台通过 Bridge 调用 UI Manager 来创建不同的 Native 视图。

三个线程

在 React Native 里面,真正有三个重要的线程在执行,他们分别是 Shadow thread、UI thread 和 JS thread。

JS thread: 其实是 JavaScript 线程,负责 JS 和原生代码的交互线程,因为 JS 是单线程模型,所以需要一个单独的线程来驱动,并且 JS 和 Native 交互是异步的。

Shadow thread: 这个线程是负责 Native 布局,提供给 yoga 引擎使用。

UI thread:这个可以看作是主线程,可以看作是 UI Manager 线程,负责页面的交互和控件绘制逻辑。

热更新

React Native 的产物 bundle 文件,本质上是 JS 的逻辑代码加上 React Native 的 Runtime 的集合,所以在应用一启动的时候就会去获取 bundle 文件,之后解析 bundle 文件,最后再由 JS Engine 去执行具体的业务代码逻辑。这就可以允许开发者在云端去更新 bundle 文件,然后应用启动的时候获取最新的 bundle 文件,这一整个流程下来就实现了热更新。

增量更新(拆包)

对于 React Native 的代码打包之后只会生成一个 Bundle 文件,这里面包含了基础业务逻辑、React Native 的基础库类,所以我们可以把一个包拆分成:一个基础包+ n 个业务包,其中基础包是不变的,这就是 runtime,业务包就是具体的业务,后面如果有更新,也只需要再打出一个业务包就行。

目前行业的解决方案有 facebook 官方提供的 metro bundle:https://facebook.github.io/metro/

React Native 实践

安装环境(针对 macOS)

iOS 所需环境: Node、Watchman、Xcode、CocoaPods。

Android 所需环境: Node、Watchman、JDK 和 Android Studio。

可参考 React Native 官网:https://reactnative.cn/docs/getting-started

Notice-1:AppStore Xcode 最新的版本可能对系统版本有需求,不想升级系统,想装之前版本的 Xcode 的同学可以看看这里:https://developer.apple.com/download/more/

Notice-2:在安装 CocoaPods 依赖的时候很可能会出现下载失败的情况,可以试下切换镜像源:https://mirror.tuna.tsinghua.edu.cn/help/CocoaPods/

Notice-3:请仔细阅读官网教程,因为从头到尾操作一遍之后项目仍然无法跑起来的体验真的很抓狂。

目录结构

用 React Native 官方脚手架生成的项目目录是这样的:

   ├── android # Android runtime
├── iOS # iOS runtime
├── node_modules # 项目依赖
├── app.json # 描述app 信息
├── App.js # React Native 代码
├── index.js # 入口文件,这个文件里面调用了AppRegistry.registerComponent,注册React Native组件提供给Native
├── package.json # 依赖信息和版本信息
├── ...
├── ...
├── ...
复制代码

实现一个弹窗动画

需要用到组件:View、Text、TouchableOpacity、StyleSheet、Dimensions、Animated。他们分别有什么用?

View: 最基础的 UI 组件,View 是一个支持 Flexbox 布局的容器,可以看作是浏览器的 div。

Text: 用于显示文本的 UI 组件,文本内容一般需要放在这个组件里面。

TouchableOpacity: 按钮组件,并且点击的时候会提供一个半透明的效果,该效果由原生支持实现,当点击的时候会触发一个 onPress 事件。

StyleSheet: 提供了一种类似 CSS 样式表的抽象,它可以使用 JS 对象来编写 CSS 样式。

Dimensions: 封装了设备的宽高属性,一般设置元素的宽高可以基于它来实现屏幕适配。

Animated: 动画库,它提供了用户输入、输出动画属性的能力,来实现一些简单动画。

首先在页面里面加入一个按钮,点击的时候显示一个全屏的 Modal 弹窗:

   // 控制弹窗显示隐藏
const [visiable, setVisiable] = useState(false);


   {/* 官方组件,忽略 */}
  
     setVisiable(true)}>
      Button
    
  
   setVisiable(false)} />


const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
  },
  buttonWrap: {
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 20,
  },

  button: {
    width: 100,
    height: 30,
    backgroundColor: 'skyblue',
    borderRadius: 5,
    alignItems: 'center',
    justifyContent: 'center',
  },

  buttonText: {
    color: '#fff',
  },
});
复制代码

接下来我们编写 Modal 弹窗的样式,首先它应该是个全屏的,并且有个半透明的背景色,然后内容区域应该是居中显示的:

   
  
    
      Close
    
  


const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    left: 0,
    top: 0,
    flex: 1,
    width: '100%',
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    position: 'relative',
    opacity: 0,
    width: 200,
    height: 200,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    width: 100,
    height: 30,
    backgroundColor: 'skyblue',
    borderRadius: 5,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonText: {
    color: '#fff'
 },
});
复制代码

它们分别长这样:

现在只差一件事了,就是加上动画属性,这个时候就需要用到 Animated 了:

    // 创建一个渐变值。
 const [fade] = useState(new Animated.Value(0));
复制代码

我们用 Animated 创建了一个 fade 变量,这个变量是可变的,我们可以使用 Animated.timing().start()方法,来改变 fade 的值。

   Animated.timing(
      fade, // 动画中的变量值
      {
        toValue: 100, // 需要变成的值
        duration: 400, // 变化执行时长,0-100的变化需要400毫秒
        useNativeDriver: false, // 是否使用原生动画引擎,如果开启,部分属性是不支持原生渲染的,会报错,所以一般会关闭这个选项。
      },
    ).start();
复制代码

现在我们要把 fade 的值(0 ~ 100)映射成背景色从 rgba(0, 0, 0, 0) ~ rgba(0, 0, 0, 0.8)变化,以及元素缩放 scale(0) ~ scale(1):

   // 背景颜色过渡
let back = fade.interpolate({
    inputRange: [0, 100],
    outputRange: ['rgba(0,0,0,0)', 'rgba(0,0,0,.8)'],
    });
// 内容缩放过渡
let content = fade.interpolate({
    inputRange: [0, 100],
    outputRange: [0, 1],
});
复制代码

fade.interpolate 方法可以把线性输入范围映射到线性输出范围,并且支持缓动功能。

最后我们把这两个插值赋值给相应的 dom 元素的属性上,加上交互,在点击按钮出现 Modal 弹窗的时候,去执行 fade 插值 0-100,这样背景色就会从 rgba(0, 0, 0, 0) 渐变到 rgba(0, 0, 0, 0.8),元素大小缩放 0 到 1,当点击隐藏的时候,则相反。

效果:

总结 & 拓展

React Native 的不足

由于 React Native 和原生交互依赖的只有一个 Bridge,而且 JS 和 Native 交互是异步的,所以对需要和 Native 大量实时交互的功能可能会有性能上的不足,比如动画效率, 性能是不如原生的

React Native 始终是依赖原生的能力,所以摆脱不了对原生的依赖,相对 Flutter 的自己来画 UI 来说,React Native 显得有些尴尬。

React Native 的未来

JSI 是什么?

在 RN 中, JSI 是 JavaScript Interface 的缩写,JSI 是一个轻量级的通用的 API 框架,可以应用于任意的 JavaScript virtual machine,让各种平台可以方便地使用不同的 JavaScript 解析引擎(JavaScript virtual machine 包含 JavaScript Engine)。

JSI 是用 C++写的,用于取代原先的 bridge,提高通信效率,已在 RN 的 0.58 中实现。

目前在 RN 中,默认使用的 JavaScript virtual machine 也就是 JavascriptCore,有了 JSI ,我们就能轻松地直接调用原生 UI Views 或 Native Modules 用 Java/ObjC 实现的方法(类似 RPC),而不是像原来那样用一层 bridge 来排队等待原生层返回的消息。

JSI 能做什么?

JSI 本身不是 React Native 的一部分——它是一个统一的、轻量的、通用适用于任何(理论上) JavaScript 虚拟机的接口层。

当把 JSI 加入到新架构中后,它使得一些真正重要的改进成为可能。

第一个改进很直观——javaScriptCore 现在可以更容易地被替换成其它引擎,其它选项包括微软的 ChakraCore 和谷歌的 V8。

第二个改进,可以说是整个新架构的基石,是通过使用 JSI,JavaScript 可以持有对 C++ 宿主对象的引用,并且对它进行调用。

这意味着:JavaScript 和 Native 之间真正地相互知晓,并且不再需要通过 JSON 序列化传递消息,这会消除 Bridge 的阻塞问题。

和其他跨端技术比较

Flutter vs React Native

首先来简单了解下 Flutter 和 React Native 的背景,Flutter 是由谷歌开发的软件开发工具包(SDK)。它可以帮助开发人员使用单一代码库构建 iOS 和 Android 应用程序。React Native 与 Flutter 具有相同的目的,但方式不同。它是由 Facebook 建立的,基于 React 用于创建移动应用程序,而不会影响应用程序的外观和感觉。

开发体验

React Native 在界面开发延续了 React 开发风格,支持 css-in-js(其实就是用 js 来写 css),而且在 0.59 版本之后支持了 React Hook 函数式编程,开发的时候大多只关心样式界面的搭建,原生能力有客户端或者 Bridge 实现。

Flutter 最大的特点在于:Flutter 是一套平台无关的 UI 框架,并且在 Flutter 里面万物皆 Widget。很多时候开发一个控件需要嵌套多个 Widget 去实现,与 JS 里面的回调地狱有点像,而这也是被吐槽代码嵌套样式难看的原因。

状态管理

React Native 和 Flutter 对于状态管理,两者有着很高的相似度,虽然内部实现很大差别,但是都可以获取 state 和 setState 的方式去更新页面的状态。

产物

React Native 产生的是 bundle 文件,实际上就是 JS 脚本文件;而 Flutter 编译后 Android 产生的主要是一些应用程序指令段、数据段,虚拟机数据段、指令段,iOS 则是 App.framework,其实也是一些原生的数据集。

原生能力 & 性能

其实两者的在这方面的区别不是很大,性能方面 React Native 稍微差一点。但是在原生灵活性上 React Native 要有优势。

最后,目前来看两者是不分上下,各有所长。


欢迎关注「 字节前端 ByteFE

简历投递联系邮箱「 [email protected]

相关 [react native 原理] 推荐:

React Native 原理与实践

- - 掘金 前端
React Native 介绍. 什么是 React Native. React Native 是一个由 Facebook 于 2015 年 9 月发布的一款开源的 JavaScript 框架,它可以让开发者使用 JavaScript 和 React 来开发跨平台的移动应用. 它既保留了 React 的开发效率,又同时拥有 Native 应用的良好体验,加上 Virtual DOM 跨平台的优势,实现了真正意义上的:.

谈谈 React Native

- - 唐巧的技术博客
几天前,Facebook 在 React.js Conf 2015 大会上推出了 React Native( 视频链接). 我发了一条微博( 地址),结果引来了 100 多次转发. 为什么 React Native 会引来如此多的关注呢. 我在这里谈谈我对 React Native 的理解. 一个新框架的出现总是为了解决现有的一些问题,那么对于现在的移动开发者来说,到底有哪些问题 React Native 能涉及呢.

React Native通信机制详解

- - bang's blog
React Native是facebook刚开源的框架,可以用javascript直接开发原生APP,先不说这个框架后续是否能得到大众认可,单从源码来说,这个框架源码里有非常多的设计思想和实现方式值得学习,本篇先来看看它最基础的JavaScript-ObjectC通信机制(以下简称JS/OC). 普通的JS-OC通信实际上很简单,OC向JS传信息有现成的接口,像webview提供的-stringByEvaluatingJavaScriptFromString方法可以直接在当前context上执行一段JS脚本,并且可以获取执行后的返回值,这个返回值就相当于JS向OC传递信息.

【WebRTC 跨端通信】React + React Native 双端视频聊天、屏幕共享

- - SegmentFault 最新的文章
之前介绍过 WebRTC,简单来说它是一个点对点的实时通讯技术,主要基于浏览器来实现音视频通信. 这项技术目前已经被广泛应用于实时视频通话,多人会议等场景. 不过 WebRTC 因为其过于优秀的表现,其应用范围已经不限于 Web 端,移动 App 也基本实现了 WebRTC 的 API. 在跨平台框架中,Flutter 和 React Native 都实现了对 WebRTC 的支持.

使用 BaaS 工具 与 React Native 构建原生应用

- - SegmentFault 最新的文章
React Native 是 Facebook 在今年的 F8 大会上发布的移动应用开发方案. 它基于JavaScript 和 React,可以让 Web 应用开发者在保持原有的开发体验和效率的同时,为 Web 应用带来原生应用的体验. React Native 使用 JavaScript 作为开发语言,其内建的打包系统支持包括 CommonJS 在内的多种模块化标准,因此很多支持浏览器运行环境的 Node Package 也可以运行在 React Native 中.

轻松配置react native热更新 - 简书

- -
react-native项目有个优势就是可以动态更新bundle.js,从而更新App. 框架包括客户端SDK,以及配套的服务端. code push服务,必须在服务端配置好. App Center CLI,用于服务端信息管理. 运行以上命令并在命令行确认后,网页会弹出一个要求登陆的页面,登陆后,会得到一串.

浅谈移动应用的跨平台开发工具(Xamarin和React Native)

- - 酷 壳 – CoolShell.cn
谈移动应用的跨平台开发不能不提HTML5,PhoneGap和Sencha等平台一直致力于使用HTML5技术来开发跨平台的移动应用,现在看来这个方向基本算是失败的,基于HTML5的移动应用在用户体验上与原生应用仍然存在着明显的差距. 与上述HTML5平台不同,Xamarin和React Native通过各自的方式来实现跨平台.

cordova与ios native code交互的原理

- - CSDN博客推荐文章
很早以前写了一篇博客,总结cordova插件怎么调用到原生代码: cordova调用过程,不过写得太水,基本没有提到原理. 最近加深了一点理解,重新补充说明一下. 下面是我们产品中的代码片段:. cordova插件最终表现出来的都是js接口,并且调用者完全不需要知道自己在调用一个cordova插件.

NervJS/taro: 开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/

- -
👽Taro['tɑ:roʊ],泰罗·奥特曼,宇宙警备队总教官,实力最强的奥特曼. Taro是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5 等应用. 现如今市面上端的形态多种多样,Web、React Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要.

Webpack 和 React 小书

- - SegmentFault 最新的文章
Webpack 和 React 小书. 这本小书的目的是引导你进入 React 和 Webpack 的世界. 他们两个都是非常有用的技术,如果同时使用他们,前端开发会更加有趣. 这本小书会提供所有相关的技能. 如果你只是对 React 感兴趣,那可以跳过 Webpack 相关的内容,反之亦然. 如果想学习更多的相关知识可以移步 SurviveJS - Webpack and React.