javascript - 嵌套提供程序在 react-native 中无法正常工作

Question

这是应用程序文件：

import React from 'react';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs'; 
import AccountScreen from './src/screens/AccountScreen';
import SigninScreen from './src/screens/SigninScreen';
import SignupScreen from './src/screens/SignupScreen';
import TrackListScreen from './src/screens/TrackListScreen';
import TrackDetailScreen from './src/screens/TrackDetailScreen';
import TrackCreateScreen from './src/screens/TrackCreateScreen';
import {setNavigator} from './src/navigationRef';
import ResolveAuthScreen from './src/screens/ResolveAuthScreen';

import {Provider as LocationProvider} from './src/context/LocationContext';
import {Provider as AuthProvider} from './src/context/AuthContext';

const switchNaivgator= createSwitchNavigator({
ResolveAuth:ResolveAuthScreen,
loginFlow: createStackNavigator({
Signup:SignupScreen,
Signin:SigninScreen
}),

mainFlow: createBottomTabNavigator({
  trackListFlow: createStackNavigator({
    TrackList:TrackListScreen,
    TrackDetail:TrackDetailScreen
  }),
    TrackCreate:TrackCreateScreen,
    Account:AccountScreen
})

});
const App= createAppContainer(switchNaivgator);

export default () => {
  return (
        <LocationProvider>
          <AuthProvider>
          <App 
            ref={ navigator => {
             setNavigator(navigator) 
              }}
            />
          </AuthProvider>
        </LocationProvider>
    );
}

在这种情况下，我无法使用 LocationProvider 中定义的函数，但可以使用 AuthProvider 中的变量..！！如果我重写该部分，则相同

export default () => {
  return (
          <AuthProvider>
            <LocationProvider>
          <App 
            ref={ navigator => {
             setNavigator(navigator) 
              }}
            />
          </LocationProvider>
          </AuthProvider>
    );
}

现在我可以使用 LocationProvider 中定义的值，但无法访问 AuthProvider 中的值..！！

标签： javascriptreactjsreact-nativereact-hooks