前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
AI 面试
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
AI 面试
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航

React Native之启动流程

首页
2019-10-02 15:40:12
Front-End
RNreact

JS程序的入口,将当前APP对象注册到AppRegistry组件中,AppRegistry组件是js module

import { AppRegistry } from 'react-native'
 ...省略代码

 AppRegistry.registerComponent('demo', () => Index)
@前端进阶之旅: 代码已经复制到剪贴板

# 启动流程

  • 我们新建一个RN的项目,在原生代码中会生成MainActivity和MainApplication两个Java类。顾名思义,MainAcitivity就是我们的Native的入口了,
  • 我们先来看下MainApplication都做了哪些操作
public class MainApplication extends Application implements ReactApplication {
    //ReactNativeHost:持有ReactInstanceManager实例,做一些初始化操作。
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage()
      );
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    //SoLoader:加载C++底层库,准备解析JS。
    SoLoader.init(this, /* native exopackage */ false);
  }
}
}
@前端进阶之旅: 代码已经复制到剪贴板

我们再来看下MainActivity的代码

public class MainActivity extends ReactActivity {

    @Override
    protected Stri
fe
  • 启动流程
  • ReactActivity
  • ReactRootView
  • ReactInstanceManager
  • CatalystInstance
  • JSBundleLoader
  • CatalystInstanceImpl.cpp
  • Instance.cpp
  • AppRegistry.js
  • 系统框架图
  • 启动流程图

← React Native之原理浅析React Native之图片/宽高/字体平台适配 →