1

我正在使用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`.

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

4

3 回答 3

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;

截屏

在此处输入图像描述

于 2016-11-16T07:19:33.083 回答
2

由于您正在进行default导出，因此您应该{}从您的import:

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

请参阅为什么 es6 react 组件仅适用于“导出默认值”？

于 2016-11-16T05:50:21.537 回答
-1

尝试改变：

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

至

import TabFooter from '../Components/Footer';
于 2016-12-07T04:27:59.563 回答