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>
)
}
}
解决方案
在某些情况下改变组件的创建方式就足够了
import React, { Component } from 'react'
export default class ComponentName extends Component {
}
推荐阅读
- azure-databricks - 将 Databricks 数据帧写入 BLOB 存储
- mysql - 如何在 mysql 的表中获取每个日期的唯一 SKU 计数(自学问题)
- java - Maven包含依赖删除一个
- javascript - 将对象数组附加到 HTML 文件中
- java - List all subpackages of a package (when their classes are loaded dynamically)
- amazon-web-services - Terraform 用户 TF_VAR 不工作的嵌套模块
- django - Django how to link tableCheckBoxColumn to DB entry
- azure - Read a csv in azure notebooks
- sql-server - SSRS - 如何将日期/时间参数的格式设置为 yyyy-mm-dd hh:mm:ss?
- c# - 注册表项 EditionID 在 WOW6432Node 下的值错误 - 有意还是错误?如何绕过?