看 react native 源码 (1)

在 native react 中 c++ 作为一部分赋值加载 javascript 并且以及 native 和 javascript 之间通讯，有关 c++ 这些动态链接库的加载

首先是怎么画上去的，

每一个模块会建立一个线程，

首选我们在 UI 线程中初始化 rootView 这是放置所有原生组件的容器

最近时间感觉 Android 开发成本还是挺高的，尤其还得开发 iOS版本，所以最近这里 Zi = React 了，react native 已经对我们不那么陌生了，Facebook 给我们带来的全新混合开发移动的用户体验。之前自己简单写了混编框架，感觉还不错，当然是和自己比。所以最近对混编框架产生了浓厚兴趣，插一句对于前端学习 c++ 变得至关重要。自己学过一段，不过只是皮毛。好回到正题，所以最近开始学习 react native 框架，写了几个小 Demo 感觉开发体验不错，以前写过 react .p。写着写着就下道了，大胆地想看看内部机制。好看源码，我是一个想法很多的人。

开始之间我们在想几个问题

• 如何读取 js 文件渲染出组件
• 如何读取 js 文件
• js 运行在哪里
• 原生和 js 是如何通讯的

带着问题打开源码

面对这一团乱麻关键是我们需要找到线头，终于在别人的 blog 上看到了
这句话

React Native 其实是运行在ReactActivity上
我建了个 Android 项目，就用 Zi 吧，Zi = React

public abstract class ZiActivity extends AppCompatActivity {

    protected String getMainComponentName(){
        return null;
    }
}

然后我们入口 Activity 需要继承这个 ZiActivity 然后复写 getMainComponentName 方法给出我们项目名称

public class SplashActivity extends ZiActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash);
    }

    @Override
    protected String getMainComponentName() {
        return "ziproject";
    }
}

然后就是我们应用了

public class MainAppliction extends Application implements ZiApplication{

    private final ZiNativeHost mZiNativeHost = new MainZiNativeHost(this);

    @Override
    public ZiNativeHost getZiNativeHost() {
        return mZiNativeHost;
    }
}

我们这里 ZiNativeHost 抽象类，这是大人物，我们需要花时间研究一下，说他关键是因为他帮助我们创建了一个 ZiInstanceManager 这是通过 ZiInstanceManagerBuilder 类构建出来的，

这个东西 ZiInstanceManager 太重要了，贯穿我们整个项目。我们看一看 InstanceManager 包含什么吧。
突然一看这是一个 1k 以上的类呀，我们得看一会儿。
一步一步来吧。

• Set mAttachedRootViews
  包含了 RootView 集合，添加 rootview 我们组件都会添加到 ZiRootView 下面
• LifecycleState
  这是一个枚举列出了生命周期几种状态 before create->before resume-> resume

public enum LifecycleState {
    BEFORE_CREATE,
    BEFORE_RESUME,
    RESUMED,
}

待续