Question

我收到此错误消息，但我不知道！

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

Answer 1

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

import React, { Component } from 'react'

export default class ComponentName extends Component {
}

不变违规：元素类型无效：需要一个字符串-本机响应

1 个答案: