Question

我已经环顾四周，如果导入或导出不正确，我会解决大部分问题，但我已经检查了我的应用，并且我不确定我导出/导入的是什么不正确。这是我得到的确切错误。

React.createElement：type无效 - 期望一个字符串（for 内置组件）或类/函数（用于复合组件）但得到了：对象。您可能忘记从中导出组件将其定义为文件。检查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未定义，在渲染子组件时会导致错误。在这种情况下，navigator={navigator}需要更改为navigator={props.navigator}，HomeContainer和NimbusCamera组件中的TrackerLibraryContainer。

React Native Element Type无效。选中渲染方法

1 个答案: