React Native 错误 - React: createElement: type 不应该为 null

Question

我正在使用 nativebase 作为我正在开发的 React Native 应用程序的 UI 端的基础，但我遇到了一个应该非常简单的错误。

我想为应用的标签页脚创建一个组件，以包含在不同的视图中，如下所示：

./Components/Footer.js

import React, { Component } from 'react';
import {
  Footer,
  FooterTab,
  Button,
  Icon,
  Text
} from 'native-base';

class TabFooter extends Component {
  render() {
    return (
      <Footer >
        <FooterTab>
          <Button>
            <Badge>2</Badge>
            Apps
            <Icon name='ios-apps-outline' />
          </Button>
          <Button>
            Camera
            <Icon name='ios-camera-outline' />
          </Button>
          <Button active>
            Navigate
            <Icon name='ios-compass' />
          </Button>
          <Button>
            Contact
            <Icon name='ios-contact-outline' />
          </Button>
        </FooterTab>
      </Footer>
    );
  }
}

export default TabFooter;

一个示例视图是：

import React, { Component } from 'react';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Icon,
  Text, List, ListItem, Input, InputGroup } from 'native-base';
import { TabFooter } from '../Components/Footer';

class EditGuest extends Component {
  render() {

    return (
      <Container>
        <Header>
          <Title>Whatever title</Title>
        </Header>

        <Content>
        </Content>
        <TabFooter />
      </Container>
    );
  }
}

export default EditGuest;

但是当这个视图呈现时，我得到了错误：

ExceptionsManager.js:82 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `EditGuest`.

我是否缺少一些真正基本的东西，因为我认为我可以简单地将这个组件包含在任何视图中而没有任何问题...

Answer 1

由于您正在执行default 导出，您应该从您的import 中删除{}：

import TabFooter from '../Components/Footer';

见Why es6 react component works only with "export default"?

Answer 2

myFooter.js

import React, { Component } from 'react';
import { Footer, FooterTab, Button, Icon, Badge } from 'native-base';

class TabFooter extends Component {
  render() {
    return (
      <Footer>
        <FooterTab>
          <Button>
            <Badge>2</Badge>
            Apps
            <Icon name="ios-apps-outline" />
          </Button>
          <Button>
            Camera
            <Icon name="ios-camera-outline" />
          </Button>
          <Button active>
            Navigate
            <Icon name="ios-compass" />
          </Button>
          <Button>
            Contact
            <Icon name="ios-contact-outline" />
          </Button>
        </FooterTab>
      </Footer>
    );
  }
}

export default TabFooter;

EditGuest.js

import React, { Component } from 'react';
import { View } from 'react-native';
import { Container, Header, Title, Content } from 'native-base';
import TabFooter from './myFooter';

class EditGuest extends Component {

  render() {
    return (
      <Container>
        <Header>
          <Title>Whatever title</Title>
        </Header>

        <Content />

        <View>
          <TabFooter />
        </View>
      </Container>
    );
  }
}

export default EditGuest;

截图

Answer 3

尝试改变：

import { TabFooter } from '../Components/Footer';

到

import TabFooter from '../Components/Footer';