导入的React-navigation但未定义

Question

我的react-native应用程序使用react-redux和react-navigation。

App.js导入Main组件。在Main内部，导入react-navigation并定义所有导航器。但是，我仍然得到TypeError：undefined不是that.navigation.navigate('Auth')中Main上的对象（评估'that.navigation.navigate'）]。

我也试过navigation.navigate('Auth')但得到了无法找到变量：导航。导入react-navigation并在同一个文件中使用它是不好的做法吗？我想在Main中使用导航，以避免在每个屏幕中调用firebase.auth().onAuthStateChanged。

App.js

...

const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));

class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Main />
      </Provider>
    );
  }
}

export default App;

Main.js

import React from 'react';
import { createStackNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation';

...

const MainStack = createSwitchNavigator(
  {
    Home: HomeStack,
    Auth: AuthStack
  },
  {
    initialRouteName: 'Home'
  }
);

const AppContainer = createAppContainer(MainStack);

class Main extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount = () => {
    var that = this;
    firebase.auth().onAuthStateChanged(async function(user) {
        if (user) {
            await that.props.getUserProfile(user.uid);
        } else {
            that.navigation.navigate('Auth');
        }
    })
  }

  render() {
    return (
      <AppContainer />
    );
  }
}

const mapStateToProps = state => {
  return {
      user: state.auth.user
  }
}

export default connect(mapStateToProps, {getUserProfile})(Main);

Answer 1

我不确定，因为我从未使用过反应导航但似乎只有AppContainer和他的孩子被包裹而不是主要组件，这应该是为什么导航在这里未定义。您应该重新考虑组件架构顺序

---

形式https://facebook.github.io/react-native/docs/navigation

每个屏幕组件都可以设置导航选项，例如标题标题。它可以使用navigation道具上的动作创建者链接到其他屏幕

您的Main组件不是屏幕，您不能在其中使用导航。

你可以这样做：

const AppContainer = isAuthentified => createAppContainer(createStackNavigator(
 {
  Home: HomeStack,
  Auth: AuthStack
 },
 {initialRouteName: !!isAuthentified ? 'Home' : 'Auth'}
)); 


class Main extends React.Component {
  constructor(props) {
   super(props);
   state = {loading: false};
  }

  componentDidMount = () => {
   let tmpuser = false; 
   firebase.auth().onAuthStateChanged(async function(user) {
    if (user) {
        tmpuser = await that.props.getUserProfile(user.uid);
    }});
   this.setState({user: tmpuser, loading: false})
  }

  render() {
   if (!this.state.loading) 
    return (
     <div>{AppContainer(this.state.user)}</div>
    );
   else return (<div>loading</div>);
  }
}

//可能不完美，在智能手机上完成