不变违规：元素类型无效预期字符串（对于内置组件）...但得到：未定义答案

【问题标题】：Invariant Violation: Element type is invalid expected a string (for built-in components)...but got: undefined不变违规：元素类型无效预期字符串（对于内置组件）...但得到：未定义
【发布时间】：2020-06-27 23:22:32
【问题描述】：

错误信息是：

Invariant Violation：元素类型无效，期望字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义

我是新来的反应，找不到代码有什么问题。错误消息告诉我“检查'LoginScreen'的渲染方法”。

我的代码：

// Import React Navigation
import {
  createBottomTabNavigator,
  createStackNavigator,
} from 'react-navigation';

import tabBarIcon from './utils/tabBarIcon';
// Import the screens
import FeedScreen from './screens/FeedScreen';
import NewPostScreen from './screens/NewPostScreen';
import SelectPhotoScreen from './screens/SelectPhotoScreen';
import React, {Component, Button} from 'react';
/*export default class App extends Component<Props> {
  render(){
    <View>
    </View>
  }
}*/
class LoginScreen extends Component {
  login() {
    this.props.navigation.navigate('Main');
  }

  render() {
    return <Button title='Login' onPress={() => {this.login()}} />;
  }
}
// Create our main tab navigator for moving between the Feed and Photo screens
const navigator = createBottomTabNavigator(
  {
    // The name `Feed` is used later for accessing screens
    Feed: {
      // Define the component we will use for the Feed screen.
      screen: FeedScreen,
      navigationOptions: {
        // Add a cool Material Icon for this screen
        tabBarIcon: tabBarIcon('home'),
      },
    },
    // All the same stuff but for the Photo screen
    Photo: {
      screen: SelectPhotoScreen,
      navigationOptions: {
        tabBarIcon: tabBarIcon('add-circle'),
      },
    },
  },
  {
    // We want to hide the labels and set a nice 2-tone tint system for our tabs
    tabBarOptions: {
      showLabel: false,
      activeTintColor: 'black',
      inactiveTintColor: 'gray',
    },
  },
);

// Create the navigator that pushes high-level screens like the `NewPost` screen.
const stackNavigator = createStackNavigator(
  {
    Main: {
      screen: navigator,
      // Set the title for our app when the tab bar screen is present
      navigationOptions: { title: 'Insta' },
    },
    // This screen will not have a tab bar
    NewPost: NewPostScreen,
  },
  {
    cardStyle: { backgroundColor: 'white' },
  },
);

const TopLevelNav = createStackNavigator({
  Login: { screen: LoginScreen },
  Main: { screen: stackNavigator },
}, {
  headerMode: 'none',
});
// Export it as the root component
export default TopLevelNav;

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

Button 不会从 react 导出。它是react-native 的一部分。 Source.

改为：

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

当您的导入不正确时，通常会出现此错误。常见原因包括：

完全忘记导出/导入
使用不匹配的导入类型（默认/命名）
从错误的库或路径导入

在这种情况下，它只是从错误的包中导入，这将使其成为undefined。

【讨论】：