上下文挂钩与React导航路由交叉

Question

我的React Native（0.61.5）/ React 16.9.0应用程序具有嵌套的3层反应导航（5.x）路由结构，如下所示：

App.js (NavigationContainter/StackNavigator)
    SplashScreen.js
    AppScreen.js (TabNavigator)
       EventStackScreen.js (StackNavigator)
         Event.js (screen)
         Chat.js (screen)
         Newevent.js (screen)
         Editevent.js (screen)
       GroupStackScreen.js (StackNavigator)
         Group.js (screen)
         Newgroup.js (screen)
       ContactStackScreen.js (StackNavigator)
         Contact.js (screen)
         Newcontact.js (screen)

 *The file extension indicates that it is a single file. 

该应用程序将显示3个选项卡，并路由到Chat选项卡下的Event屏幕，直到将上下文挂钩添加到AppScreen.js。添加上下文后，我可以看到Event选项卡，将无法打开Chat屏幕。

这里是AppScreen.js中的代码：

export default function AppScreen ({route, navigation}) {

  console.log("Routes available in AppScreen : ", navigation.dangerouslyGetState().routes)
  const authContext = React.createContext(null);
  const stateContext = React.createContext(null);
  const propsContext = React.createContext(null);
  console.log("route in AppScreen : ", route.params);
  const {data} = route.params;

  //do something here

  let authVal = {
    myself,
    result,  
    updateToken,  
  }
  let stateVal = {
    group_id,
    grp_name,
    role,
    alias,
    updateGroup,
    updateGrpmember,
  }
  let propsVal = {
    device_id,
  }

  return (
     <propsContext.Provider value={propsVal}>
        <authContext.Provider value={authVal}>
            <stateContext.Provider value={stateVal}> 
                <BTab.Navigator>
                    <BTab.Screen name="Event" component={EventStackScreen} />
                    <BTab.Screen name="Group" component={GroupStackScreen} />
                    <BTab.Screen name="Contact" component={ContactStackScreen} />
                </BTab.Navigator>
             </stateContext.Provider>
        </authContext.Provider>
    </propsContext.Provider> 

  );
};

一旦删除了3个上下文提供者，然后再次路由到Chat屏幕。这是EventStackScreen.js：

const EStack = createStackNavigator();

export default function EventStackScreen({route, navigation}) {
    const data = route.params.data;

    //do something....

    return (
        <EStack.Navigator initialRouteName="Event">
          <EStack.Screen name="Event" component={Event} />
          <EStack.Screen name="New Event" component={NewEvent} />
          <EStack.Screen name="Edit Event" component={EditEvent} />
          <EStack.Screen name="Chat" component={Chat} />
        </EStack.Navigator>
      );
}

我已经花了很多时间解决路由问题，但还没有弄清问题出在哪里。最后的方法是摆脱上下文，并以传统方式传递变量值，即使React Navigation建议使用上下文代替。

Answer 1

要解决该问题，请将所有与上下文相关的代码移到GlobalContext.js中，然后使用AppScreen.js将其导入import {authContext, stateContext, propsContext} from "./GlobalContext"中。这是GlobalContext.js：

import React, {Component} from 'react';

const authContext = React.createContext(null);
const propsContext = React.createContext(null);
const stateContext = React.createContext(null);

export {authContext, stateContext, propsContext}