探究react-native如何像原生那样弹出视图

项目中封装的一些公共组件，比如PopView，若想使用，常规套路是在render方法里面先渲染，用state控制其是否显示。这样子显得很二，明明这个组件可能因用户的操作，不是必须显示的，但为了那一分可能，就必须在render方法里面渲染，并且多加一个state控制，很麻烦。那么有可能像原生那样，当要显示的时候直接PopView.show()么？
答案是肯定的。使用react-native-root-siblings库。
先看用法：
原有项目中封装的一个PopViewContainer组件，他的样子如下

我们需要做的就是在它的基础上包装一下，包装代码如下

上半部分

下半部分

上半部分：对外提供了两个静态方法，用来弹出/关闭视图，定义的lastPopView全局变量，作用是销毁已存在的视图，这样，外界就只需要调用PopView.show()，而不必担心视图回收问题。这里面的关键是RootSiblings，现在只需要知道它是一个PopViewContainer组件的包装类即可
下半部分：这是备用的，目的是让组件也可以像常规组件那样，先在render方法里面渲染，并用state控制显示与否

这样，在项目中就可以如下方式使用了：

点击事件触发

render方法里面渲染

现在瞧瞧react-native-root-siblings库的原理
这个库只有两个文件，我喜欢。
SiblingsManager.js实现如下：

构造方法中的Object.defineProperty函数是给该类的属性_id赋值，整个项目中每调一次初始化方法，也就是我们包装类中使用的new RootSiblings(类A),则会让类A的_id属性累加，比如项目中调用了10次该方法，下一次再调用，则被包装类A的_id值为11。这样是为了在整个项目范围内区分每一个被包装类。

AppRegistryInjection.js实现如下：

上部分

下部分

至此，很清楚了。框架是重写了系统的AppRegistry.registerComponent方法，当我们通过这个方法注册根组件的时候，替换根组件为我们自己的实现的包装类。包装类中监听了目标通知siblings.update，接收到通知就将通知传入的组件视图添加到包装类顶层，然后刷新显示