React-Navigation：在应用程序出现前景时导航到以前的活动屏幕

Question

a）用户导航到应用程序中的某些屏幕B。后台应用程序。

b）用户打开应用程序->应用程序始终打开到initialRouteName（“加载->”选项卡导航器“屏幕A”中的第一个屏幕）。这是意外的，因为以前在屏幕B上使用过。

类似地，从通知中打开应用程序时，将调用“加载”路线，然后将其定向到TabNavigator第一个屏幕。我想我可以存储导航历史记录，然后在“正在加载”屏幕中从前台打开时检查先前的屏幕状态。对于通知案例，我可以在点击时存储通知参数，然后从存储中提取通知参数以将用户定向到该特定页面。这似乎很麻烦，我想知道是否有更好的方法。

//Navigator
const SwitchNavigator = createSwitchNavigator(
  {
    TabNavigator,
    Auth,
    Loading
  },
  {
    initialRouteName: "Loading"
  }
);

//Loading.js
componentDidMount() {
   signedIn ? this.props.navigation.navigate(TabNavigator)
       : this.props.navigation.navigate(Auth)
  }

Answer 1

我已经使用React Context解决了此问题。我将当前屏幕存储在上下文对象的属性中，当应用返回到前景时，在初始路径中，我从上下文获取当前屏幕的值并导航至该屏幕。

类似的东西：

// context.js
import { createContext } from 'react';
export const AppContext = createContext({
  currentScreen: null,
});


// rootManager.js
import React, { useContext, useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Loading from 'loading';
import ScreenA from 'screenA';
import ScreenB from 'screenB';
import ScreenC from 'screenC';
import { AppContext } from 'context';
const Stack = createStackNavigator();
function RootManager() {
  const appContext = useContext(AppContext);
  const [initialRoute, setInitialRoute] = useState('Loading');
  // Initializing code ...  
  return (
    <AppContext.Provider value={appContext}>
      <NavigationContainer>
        <Stack.Navigator initialRouteName={initialRoute} headerMode='none'>
          <Stack.Screen name='Loading' component={Loading} />
          <Stack.Screen name='ScreenA' component={ScreenA} />
          <Stack.Screen name='ScreenB' component={ScreenB} />
          <Stack.Screen name='ScreenC' component={ScreenC} />
        </Stack.Navigator>
      </NavigationContainer>
    </AppContext.Provider>    
  );
}
export default RootManager;

// loading.js
import React, { useContext } from 'react';
import { AppContext } from 'context';
function Loading({ navigation }) {
  const appContext = useContext(AppContext);
  // Control code ... 
  const cacheResourcesAsync = async () => {
    // Loading code ...    
    navigation.navigate(appContext.currentScreen || 'ScreenA');
  };
  return (
    // Rendering code ...
  );
}
export default Loading;

// screenA.js
import React, { useContext } from 'react';
import { AppContext } from 'context';
function ScreenA({ navigation }) {
  const appContext = useContext(AppContext);
  appContext.currentScreen = 'ScreenA';
  // Control code ...  
  return (
    // Rendering code ...
  );
}
export default ScreenA;

// screenB.js
import React, { useContext } from 'react';
import { AppContext } from 'context';
function ScreenB({ navigation }) {
  const appContext = useContext(AppContext);
  appContext.currentScreen = 'ScreenB';
  // Control code ...  
  return (
    // Rendering code ...
  );
}
export default ScreenB;

// screenC.js
import React, { useContext } from 'react';
import { AppContext } from 'context';
function ScreenC({ navigation }) {
  const appContext = useContext(AppContext);
  appContext.currentScreen = 'ScreenC';
  // Control code ...  
  return (
    // Rendering code ...
  );
}
export default ScreenC;