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;

React-Navigation：当应用程序前台时导航到以前的活动屏幕

1 个答案: