this.props.navigation.navigate не перемещается на другие экраны

Question

У меня есть вкладка навигатор и стек навигатор.Вот структура:

const MainNavigator = createBottomTabNavigator({
      welcome: { screen: WelcomeScreen },
      auth: {
        screen: createStackNavigator({
          auth: {
            screen: AuthScreen,
            navigationOptions: {
              header: null
            }
          },
          login: {
            screen: LoginScreen,
            navigationOptions: {
              title: 'Login',
              headerTintColor: '#fff',
              headerStyle: {
                backgroundColor: '#3f2141'
              }
            }
          },
          newAccount: {
            screen: NewAccountScreen,
            navigationOptions: {
              title: 'Create an Account',
              headerTintColor: '#fff',
              headerStyle: {
                backgroundColor: '#3f2141'
              },
              headerTitleStyle: {
                fontSize: 20
              }
            }
          }
        }),
      },
      main: { screen: MainScreen }
    })

Нет проблем при попытке перейти с экрана авторизации на экран входа в систему или экран новой учетной записи.Но я пытаюсь перейти с экрана новой учетной записи на главный экран, если создание учетной записи прошло успешно.Вот код действия, который пытается это сделать:

export const createUser = ({ email, password }) => {
  return(dispatch) => {
    dispatch({ type: CREATE_USER });

    firebase.auth().createUserWithEmailAndPassword(email, password)
      .then(user => createUserSuccess(dispatch, user))
      .catch(() => createUserFail(dispatch));
  };
};

const createUserFail = (dispatch) => {
  dispatch({ type: CREATE_USER_FAIL })
};

const createUserSuccess = (dispatch, user) => {
  dispatch({
    type: CREATE_USER_SUCCESS,
    payload: user
  });
  navigateToMainScreen();
};

const navigateToMainScreen = () => {
  this.props.navigation.navigate('main')
};

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

Answer 1

Если вы пытаетесь вызвать this.props.navigation.navigate в отдельном компоненте, ему необходимо сначала передать проповедь navigation.Допустим, вы хотите использовать navigation в NewAccountScreen, а затем передать реквизит следующим образом:

<NewAccountScreen navigation={this.props.navigation}/>

в родительском компоненте, где необходимо отобразить NewAccountScreen.

Другойспособ использования navigation в любом месте вашего приложения - withNavigation.Следуя официальной документации :

import React from 'react';
import { Button } from 'react-native';
import { withNavigation } from 'react-navigation';

class NewAccountScreen extends React.Component {
  // your code including the call to this.props.navigation.navigate()
  // ...
}

// withNavigation returns a component that wraps NewAccountScreen
// and passes in the navigation prop:

export default withNavigation(NewAccountScreen);

Используя этот подход, вы можете отобразить NewAccountScreen в любом месте вашего приложения, не передавая явно навигационную подпорку, и она будет работать как положено.

Кроме того, я настоятельно рекомендую переосмыслить структуру маршрутизатора.У вас могут быть свои причины, но для одного и того же экрана createBottomTabNavigator ввод аутентификации и основных экранов не имеет особого смысла.Существует официальная документация относительно потоков аутентификации с использованием createSwitchNavigator, которая сделает вашу жизнь проще.Подумайте об этом, прежде чем ваш проект станет более сложным!