1

開発中のReact NativeアプリのUI側のベースとしてnativebaseを使用していますが、非常に単純なはずのエラーが発生しています。

次のように、アプリのタブフッター用のコンポーネントを作成して、さまざまなビューに含める必要があります。

./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