react-native - 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')
};

但是导航功能在这里不起作用，因此用户创建帐户但屏幕不会改变。我想通了，可能是因为一个新帐户屏幕在堆栈导航器中，而主屏幕在选项卡导航器中，但我无法解决问题。

标签： react-nativereact-navigation

Answer 1

If you're trying to call this.props.navigation.navigate in a separate component, the navigation prop must be passed to it first. Let's say you want to use navigation in NewAccountScreen then pass the prop like this:

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

in the parent component where the NewAccountScreen needs to be rendered.

Another way to use navigation anywhere in your app is using withNavigation. Following the official documentation:

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

Using this approach, you can render NewAccountScreen anywhere in your app without passing in a navigation prop explicitly and it will work as expected.

On a side note, I highly recommend you to rethink your router structure. You may have your reasons but putting the auth and main screens in the same createBottomTabNavigator doesn't make much sense to me. There's official documentation regarding authentication flows using createSwitchNavigator which will make your life easier. Consider giving it a shot before your project becomes more complicated!