React Native组件导入报错及navigation.props未定义问题排查

先说说第一个错误：Invariant Violation: Element type is invalid #

你看哦，在App.js里犯了个小失误——你把HomeScreen设成了默认导出，但实际上我们应该导出的是配置好的StackNavigator实例App。React Native会把默认导出的组件当作应用入口，你这里导出的是没被导航器包裹的HomeScreen，同时AppRegistry又注册了App，这就导致组件类型不匹配，自然就报错了。

再看第二个错误：TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate') #

这个其实是第一个错误带出来的连锁问题。因为HomeScreen没有被StackNavigator正确包裹，导航器根本没机会把navigation这个关键props传给它，所以this.props.navigation就是undefined，调用navigate自然就炸了。

修正后的代码我帮你整理好了： #

App.js #

调整导出顺序，删掉错误的export default HomeScreen，把我们的导航器实例App设为默认导出：

import React from 'react';
import { Button, AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';
import HomeScreen from './HomeScreen';
import ProfileScreen from './ProfileScreen';

// 先定义导航器
const App = StackNavigator({
  Home: { screen: HomeScreen },
  Profile: { screen: ProfileScreen },
});

// 导出导航器作为应用入口
export default App;
AppRegistry.registerComponent("TestProject", () => App);

HomeScreen.js #

这里代码逻辑没问题，就是多导入了不需要的StackNavigator，我帮你删掉了：

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

export default class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };

  render() {
    const { navigate } = this.props.navigation;
    return (
      <Button
        title="Go to Jane's profile"
        onPress={() => navigate('Profile', { name: 'Jane' })}
      />
    );
  }
}

ProfileScreen.js #

同样，移除多余的StackNavigator导入，而且你这里没用到navigate，那行代码也可以删掉：

import React from 'react';
import { Text } from 'react-native';

export default class ProfileScreen extends React.Component {
  static navigationOptions = {
    title: 'Jane Profile',
  };

  render() {
    // 没用到navigate，删掉这行也没关系
    // const { navigate } = this.props.navigation;
    return (
      <Text>Welcome to Jane profile!</Text>
    );
  }
}

小提醒 #

• 确保你已经正确安装了react-navigation依赖（你用的是旧版的StackNavigator，对应react-navigation v2/v3，没问题的）。
• 只要组件被StackNavigator注册为screen，导航器就会自动把navigation等props传给它，不用你手动传递哦～

内容的提问来源于stack exchange，提问作者Chen Li Yong