我环顾四周,其中大部分问题都是导入或导出不正确造成的,但我检查了我的应用程序,但我不确定我导出/导入的内容有误。这正是我遇到的错误。
React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in. Check the render method of
FooterTabs
.
不确定渲染方法是什么意思。该组件没有渲染方法。无论如何...
所以 FooterTabs
就是我渲染一些页脚标签
import React, { PropTypes } from 'react'
import { View, Text } from 'react-native'
import { Tabs, Tab, Icon } from 'react-native-elements'
import { HomeContainer, TrackLibraryContainer } from '~/containers'
import { NimbusCamera } from '~/components'
export default function FooterTabs (props) {
console.log(props)
FooterTabs.propTypes = {
navigator: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired,
activeFooterTab: PropTypes.string.isRequired,
setFooterTab: PropTypes.func.isRequired,
}
return (
<Tabs>
<Tab
selected={props.activeFooterTab === "home"}
titleStyle={{fontWeight: 'bold', fontSize: 10}}
selectedTitleStyle={{marginTop: -1, marginBottom: 6}}
title="Home"
onPress={(tab) => props.dispatch(props.setFooterTab("home"))}
renderIcon={() => <Icon containerStyle={{justifyContent: 'center', alignItems: 'center', marginTop: 12}} color={'#5e6977'} type="ionicon" name='ios-home-outline' size={33} />}>
<HomeContainer navigator={navigator}/>
</Tab>
<Tab
selected={props.activeFooterTab === "camera"}
titleStyle={{fontWeight: 'bold', fontSize: 10}}
selectedTitleStyle={{marginTop: -1, marginBottom: 6}}
title="Record Preview"
onPress={(tab) => props.dispatch(props.setFooterTab("camera"))}
renderIcon={() => <Icon containerStyle={{justifyContent: 'center', alignItems: 'center', marginTop: 12}} color={'#5e6977'} type="ionicon" name='ios-camera-outline' size={33} />}>
<NimbusCamera navigator={navigator}/>
</Tab>
<Tab
titleStyle={{fontWeight: 'bold', fontSize: 10}}
selectedTitleStyle={{marginTop: -1, marginBottom: 6}}
title="Available Streams"
onPress={(tab) => props.dispatch(props.setFooterTab("library"))}
renderIcon={() => <Icon containerStyle={{justifyContent: 'center', alignItems: 'center', marginTop: 12}} color={'#5e6977'} type="ionicon" name='ios-musical-notes-outline' size={33} />}>
<TrackLibraryContainer navigator={navigator}/>
</Tab>
</Tabs>
)
}
然后我将其导出到 app/components/index.js
中,例如 export { default as FooterTabs } from './FooterTabs/FooterTabs'
导入的所有其他组件都以相同的方式导出。
我可能只是需要另一双眼睛。如果您需要查看任何其他文件代码,请告诉我。
谢谢!
最佳答案
我认为 navigator
是未定义的,在渲染子组件时会导致错误。在这种情况下,navigator={navigator}
需要在您的 HomeContainer
、NimbusCamera 中更改为
和 navigator={props.navigator}
TrackerLibraryContainer
组件。
关于javascript - React Native 元素类型无效。检查渲染方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42263333/