如何将SwitchNavigator行为与使用当前路径的反应导航5结合使用

Question

我想为我的应用程序中的所有屏幕设置一个背景。因此，我将此背景放在堆栈导航器之前一次，并使所有屏幕都具有透明背景。我使用react-navigation v5，它现在没有开关导航器，可以解决我的问题。我想切换屏幕，并查看它们背后的背景。我尝试使用useNavigationState钩子，但是在导航器外部不起作用。我该如何处理我的问题？

以下某些代码：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Provider } from 'react-redux';
import Svg, { Polygon, Defs, LinearGradient, Stop } from 'react-native-svg';
import { View, StyleSheet } from 'react-native';

import { AuthContainer, MenuContainer, ProfileContainer } from './src/screens';
import store from './src/store/store';

export type RootStackParamList = {
  Auth: undefined;
  Menu: undefined;
  Profile: undefined;
};

const Stack = createStackNavigator<RootStackParamList>();

export default function App() {
  return (
    <Provider store={store}>
      <NavigationContainer>
        <View style={[StyleSheet.absoluteFill]}>
          <Svg
            viewBox='0 0 1 1'
            width='100%'
            height='100%'
            preserveAspectRatio='none'
          >
            <Defs>
              <LinearGradient id='grad' x1='0' y1='0' x2='0' y2='1'>
                <Stop offset='0' stopColor='#3A4B6C' stopOpacity='1' />
                <Stop offset='1' stopColor='#419D9A' stopOpacity='1' />
              </LinearGradient>
            </Defs>
            <Polygon points='0 0, 0 1, 1 1, 1 0' fill='url(#grad)' />
          </Svg>
        </View>
        <Stack.Navigator
          initialRouteName='Auth'
          headerMode='none'
          screenOptions={{
            cardStyle: { backgroundColor: 'transparent' },
            cardOverlayEnabled: true,
          }}
          mode='modal'
        >
          <Stack.Screen name='Auth' component={AuthContainer} />
          <Stack.Screen name='Menu' component={MenuContainer} />
          <Stack.Screen name='Profile' component={ProfileContainer} />
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  );
}

Answer 1

我认为文档可以为您提供帮助：

Upgrading from 4.x | React Navigation