React native 不变冲突：元素类型无效：应为字符串-反应本机

我收到了这个错误消息，但我不知道

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `BackgroundDecorator`.

This error is located at:
    in BackgroundDecorator (at BottomNavigation.js:130)
    in RCTView (at View.js:71)
    in View (at BottomNavigation.js:129)
    in BottomNavigation (at App.js:80)
    in RCTView (at View.js:71)
    in View (at App.js:68)
    in App (created by AwakeInDevApp)
    in RCTView (at View.js:71)
    in View (created by AwakeInDevApp)
    in AwakeInDevApp (at registerRootComponent.js:35)
    in RootErrorBoundary (at registerRootComponent.js:34)
    in ExpoRootComponent (at renderApplication.js:35)
    in RCTView (at View.js:71)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:71)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:34)
- node_modules/react-native/Libraries/Renderer/ReactNativeRenderer-dev.js:5103:6 in createFiberFromElement
- node_modules/react-native/Libraries/Renderer/ReactNativeRenderer-dev.js:7379:8 in reconcileSingleElement
- ... 28 more stack frames from framework internals

我的代码是：

import React from 'react'
import { View, StyleSheet, Image } from 'react-native'
import BottomNavigation, {
  IconTab,
  Badge
} from 'react-native-material-bottom-navigation'
import Icon from '@expo/vector-icons/MaterialCommunityIcons'

export default class App extends React.Component {
  state = {
    activeTab: 'games'
  }


  tabs = [
    {
      key: 'games',
      label: 'Games',
      barColor: '#388E3C',
      pressColor: 'rgba(255, 255, 255, 0.16)',
      icon: 'gamepad-variant'
    },
    {
      key: 'movies-tv',
      label: 'Movies & TV',
      barColor: '#00695C',
      pressColor: 'rgba(255, 255, 255, 0.16)',
      icon: 'movie'
    },
    {
      key: 'music',
      label: 'Music',
      barColor: '#6A1B9A',
      pressColor: 'rgba(255, 255, 255, 0.16)',
      icon: 'music-note'
    },
    {
      key: 'books',
      label: 'Books',
      barColor: '#1565C0',
      pressColor: 'rgba(255, 255, 255, 0.16)',
      icon: 'book'
    }
  ]

  state = {
    activeTab: this.tabs[0].key
  }

  renderIcon = icon => ({ isActive }) => (
    <Icon size={24} color="white" name={icon} />
  )

  renderTab = ({ tab, isActive }) => (
    <IconTab
      isActive={isActive}
      showBadge={tab.key === 'movies-tv'}
      renderBadge={() => <Badge>2</Badge>}
      key={tab.key}
      label={tab.label}
      renderIcon={this.renderIcon(tab.icon)}
    />
  )

  render() {

    return (
      <View style={{ flex: 1, backgroundColor: 'white' }}>
        <View style={{ flex: 1, justifyContent: 'flex-end' }}>
          <Image
            source={require('./cut.png')}
            style={{
              resizeMode: 'contain',
              width: 412,
              bottom: -120,
              opacity: 0.5
            }}
          />
        </View>
        <BottomNavigation
          tabs={this.tabs}
          activeTab={this.state.activeTab}
          onTabPress={newTab => this.setState({ activeTab: newTab.key })}
          renderTab={this.renderTab}
          useLayoutAnimation
        />
      </View>
    )
  }
}

从“React”导入React
从“react native”导入{视图、样式表、图像}
导入导航{
伊康塔布，
徽章
}从“反应原生材质底部导航”
从“@expo/vector icons/MaterialCommunityIcons”导入图标
导出默认类App扩展React.Component{
状态={
活动标签：“游戏”
}
制表符=[
{
关键：“游戏”，
标签：“游戏”，
barColor:“#388E3C”，
按颜色：“rgba（255、255、255、0.16）”，
图标：“gamepad变体”
},
{
关键词：“电影电视”，
标签：“电影和电视”，
barColor:“#00695C”，
按颜色：“rgba（255、255、255、0.16）”，
图标：“电影”
},
{
键：“音乐”，
标签：“音乐”，
barColor:“#6A1B9A”，
按颜色：“rgba（255、255、255、0.16）”，
图标：“音符”
},
{
关键词：“书籍”，
标签：“书籍”，
barColor:“#1565C0”，
按颜色：“rgba（255、255、255、0.16）”，
图标：“书”
}
]
状态={
activeTab:this.tabs[0]。键
}
renderIcon=icon=>（{isActive}）=>(
)
renderTab=（{tab，isActive}）=>(
2}
key={tab.key}
label={tab.label}
renderIcon={this.renderIcon（tab.icon）}
/>
)
render（）{
返回(
this.setState（{activeTab:newTab.key}）
renderTab={this.renderTab}
使用动画
/>
)
}
}

在某些情况下，更改组件的创建方式就足够了

import React, { Component } from 'react'

export default class ComponentName extends Component {
}