Хук контекста взаимодействует с маршрутизацией React Navigation

Question

Приложение My 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}