Как использовать поведение SwitchNavigator с реакции-навигацией 5 с использованием текущего состояния маршрута - PullRequest
Новая
       44

Как использовать поведение SwitchNavigator с реакции-навигацией 5 с использованием текущего состояния маршрута

0 голосов
/ 11 апреля 2020

Я хочу установить один фон для всех экранов в моем приложении. Поэтому я поместил этот фон один раз перед навигатором стека и сделал все экраны с прозрачным фоном. Я использую реагирующую навигацию v5, и теперь у нее нет навигатора, который может решить мою проблему. Я хочу переключать экраны и видеть мой фон позади них. Я пытаюсь использовать useNavigationState hook, но это не работает за пределами навигатора. Как я могу решить мою проблему?

Код ниже: 

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>
  );
}

1 Ответ

0 голосов
/ 21 апреля 2020

Я думаю, что документация может помочь вам в этом:

Обновление с 4.x | Реагировать Навигация

...