如何将反应上下文与反应导航一起使用

Posted

技术标签:

【中文标题】如何将反应上下文与反应导航一起使用【英文标题】:How do I use react context with react-navigation 【发布时间】:2019-07-17 14:53:03 【问题描述】:

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

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

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

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

【问题讨论】:

【参考方案1】:

就是这么简单,只需创建一个文件示例:ctx.js

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

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

然后在你的根组件导入中提供并把Provider作为根组件 如下:

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

然后在任何要使用上下文的组件中,只需像下面这样导入消费者:

class A extends Component
 ....

const AComponent = props => (
    <Consumer>
        context => <A ...props context=context /> 
    </Consumer>
);

【讨论】:

谢谢你,太好了,我也这样做了

以上是关于如何将反应上下文与反应导航一起使用的主要内容,如果未能解决你的问题,请参考以下文章

反应导航和反应上下文

反应多个上下文

反应useContext返回未定义

未捕获的错误:在路由器上下文之外呈现的 <Link> 无法导航。(…)反应

如何将 React 钩子(useContext、useEffect)与 Apollo 反应钩子(useQuery)结合起来

我们如何将反应导航标题的标题集中在一起?