Question

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

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

./组件/ 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';

React Native错误 - React：createElement：type不应为null

3 个答案: