Где находится createSwitchNavigator в реакции-навигации 5.x для перехода от реагирования-навигации 4 к 5.x - PullRequest
Новая
       4

Где находится createSwitchNavigator в реакции-навигации 5.x для перехода от реагирования-навигации 4 к 5.x

0 голосов
/ 18 февраля 2020

Я перевожу приложение React Native из реагирующей навигации 4 на 5.x и не могу найти пакет, содержащий createSwitchNavigation. В частности, у меня есть сомнения в части проверки аутентификации токена.

При реакции с навигацией 4 у меня было: 

const switchNavigator = createSwitchNavigator({
  ResolveAuth: ResolveAuthScreen,
  signinFlow: createStackNavigator({
    Signup: SignupScreen,
    Signin: SigninScreen,
  }),
  appFlow: createBottomTabNavigator({
    TrackCreate: TrackCreateScreen,
    trackListFlow: createStackNavigator({
      TrackList: TrackListScreen,
      TrackDetail: TrackDetailScreen
    }),
    Account: AccountScreen,
  })
}, {
  initialRouteName: 'ResolveAuth'
});

Затем у меня есть файл, содержащий компонент ResolveAuthScreen. 

import React, { useEffect } from 'react';
import { connect } from 'react-redux';

const ResolveAuthScreen = (props) => {
  useEffect(() => {
    if (!props.token) {
      props.navigation.navigate('loginFlow');
    } else {
      props.navigation.navigate('TrackList');
    }
  }, []);

  return null;
};

const mapStateToProps = (state) => {
  return {
    token: state.auth.token,
  };
};

export default connect(mapStateToProps, null)(ResolveAuthScreen);

Остальные компоненты не важны для этого сомнения. Я хочу знать, как повторить тот же поток навигации Switch. Я хотел бы знать, как я могу создать что-то вроде этого: 

const Switch = createSwitchNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Switch.Navigator>
        <Switch.Screen name="ResolveAuth" component={ResolveAuthScreen} />
        <Switch.Screen name="signinFlow" component={SignInFlowScreens} />
        <Switch.Screen name="appFlow" component={AppFlowScreens} />
      </Switch.Navigator>
    </NavigationContainer>
  );
}

Ответы [ 2 ]

1 голос
/ 18 февраля 2020

На v5 нет переключателя навигатора. Вы можете попробовать ниже код 

function App({ token }) {
  const [isLoggedIn, setLoggedIn] = useState(false);

  useEffect(() => {
    if (token) {
      setLoggedIn(true);
    }
  }, []);

  return (
    <NavigationContainer>
      {isLoggedIn ? <AppFlowScreens /> : <SignInFlowScreens /> }
    </NavigationContainer>
  );
}

const mapStateToProps = (state) => {
  return {
    token: state.auth.token,
  };
};

export default connect(mapStateToProps, null)(App);
1 голос
/ 18 февраля 2020

В более ранних версиях React Navigation было 2 способа справиться с этим:

  1. Сохранение нескольких навигаторов и использование переключателя навигатора для переключения активного навигатора на другой при входе в систему (рекомендуется )
  2. Сбросить состояние навигатора до нужных экранов при входе в систему

Но для v5 вам нужно использовать контекст. Взгляните на здесь , чтобы увидеть подробный пример!

...