React本机元素类型无效。检查渲染方法

Question

我环顾四周，其中大部分问题是导致或导出不正确的结果，但我检查了我的应用程序，我不确定导出/导入不正确。这是我得到的确切的错误。

React.createElement：类型无效 - 预期一个字符串（ 内置组件）或类/功能（用于复合组件） 但得到：对象。您可能忘记从其定义的 文件中导出组件。检查渲染方法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'

已导入导出的相同方式的所有其他部件。

我可能只是需要另一组眼睛在这里。如果您需要查看任何其他文件代码，请告知我们。

谢谢！

Answer 1

我认为navigator是未定义的，导致在渲染子组件时出错。在这种情况下，您的HomeContainer，NimbusCamera和TrackerLibraryContainer组件中的navigator={navigator}需要更改为navigator={props.navigator}。