反应范围:当应用预先播放时，请导航到先前活动的屏幕

Question

a(用户在应用程序中导航到某些屏幕b。背景应用程序。

b(用户打开应用程序 ->应用程序始终打开initialRoutEname(加载 ->第一个屏幕在tab navigator"屏幕a"中(。这是出乎意料的，因为以前是在屏幕上使用的

类似地，从通知打开应用程序时，加载路由被调用，然后将其引向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.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;