如何将react上下文与react-navigation结合使用

时间:2019-02-23 19:18:49

标签: react-native socket.io react-navigation react-context

我正在尝试通过安装所有应用程序来保持socket.io实例。

我正在使用react-native,socket.io和react-navigation。

所以我需要响应上下文,以将我的socket.io实例保留在所有子组件中。

请帮助我如何在反应导航中使用反应上下文,以及如何更新上下文。

1 个答案:

答案 0 :(得分:1)

非常简单,只需创建一个文件示例:ctx.js

然后在此文件中添加以下代码:

import React from 'react';
export const { Provider, Consumer } = React.createContext();

然后在您的根组件导入中提供并放置Provider作为根组件 如下所示:

 <Provider value={this.state}>
 </Provider>

然后在您要使用上下文的任何组件中,只需按如下所示导入Consumer:

class A extends Component{
 ....
}
const AComponent = props => (
    <Consumer>
        {context => <A {...props} context={context} /> }
    </Consumer>
);