react-native-root-siblings 在应用的根元素之后添加兄弟元素

npm: https://www.npmjs.com/package/react-native-root-siblings

作用：

作用是程序根元素之后添加同级元素。创建的兄弟元素位于应用程序元素的其余部分之上。这可以用来创建一个Modal组件或什么东西在应用程序中。

理解：

当你想用自定义的全局全屏的Modal的时候就有用了。在React中有 Portal 可以实现，很多开源框架如 Ant design 的Modal也是这样实现的。但是RN没有DOM节点的概念，而且根组件是在 registerComponent 中注入的，只会注册这一次作为应用的根视图。
因此 react-native-root-siblings 的作者想了一个办法，创建一个容器同时将你自定义的Modal以及根组件同时以同层级的方式放入容器中，并通过 setWrapperComponentProvider 方法告诉RN，使用该容器代替项目中的根组件(App.js)。
这样开发者就可以在任意位置触发全局的Modal了。

引用依赖

npm install react-native-root-siblings --save
1

react-native>=0.62

例子
在app.js中引入

// in your entry file like `App.js`
import { RootSiblingParent } from 'react-native-root-siblings';

// in your render function 
return (
  <RootSiblingParent>  
        // 在里面使用路由根组件
        <Route />
    <App />
  </RootSiblingParent>
);
1
2
3
4
5
6
7
8
9
10
11

4.x 版本 及react-native低于0.62

从4.0开始，默认情况下不启用Redux存储上下文注入，应该由上下文包装器设置redux存储上下文。

需要在app.js入口文件中配置

import { RootSiblingPortal, setSiblingWrapper  } from 'react-native-root-siblings';
import { Provider } from 'react-redux';

// 在RootSiblings中使用redux上下文之前调用setSiblingWrapper
setSiblingWrapper((sibling) => <Provider store={store}>{sibling}</Provider>);

class extends Component {
    render() {
        return (
            <RootSiblingPortal>
                <View/>
            </RootSiblingPortal>
        )
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3.x 版本

1、创建一个兄弟元素

let rootSibling = new RootSiblings(<View><Text>rootSibling兄弟元素</Text></View>);
1

2、更新创建的元素的内容

rootSibling.update(<View><Text>rootSibling兄弟元素已更新</Text></View>);
1

3、销毁

rootSibling.destroy();
1