react-native-root-siblings的使用

5,999 阅读1分钟

react-native-root-siblings是react-native的一个工具库。

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

我这里使用的版本是4.0.6

引用依赖

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

基础配置

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

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

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

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

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

开始使用吧(api说明)

1、创建一个兄弟元素

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

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

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

3、销毁

rootSibling.destroy();