Javascript 反应本机错误-反应：createElement:类型不应为null

我正在开发一个React本机应用程序，我正在使用它作为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 TabFooter from '../Components/Footer';

请参见
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;

import React，{Component}来自'React'；
从“本机基础”导入{页脚、页脚选项卡、按钮、图标、徽章}；
类TabFooter扩展组件{
render（）{
返回(
2.
应用程序
摄像机
导航
接触
);
}
}
导出默认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;

import React，{Component}来自'React'；
从“react native”导入{View}；
从“本机基”导入{容器、标题、内容}；
从“/myFooter”导入TabFooter；
类EditGuest扩展组件{
render（）{
返回(
不管头衔是什么
);
}
}
导出默认的EditGuest；

截图

尝试更改：

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

到

好啊更近一步。。。这消除了错误，但没有渲染。还有什么事是我做错的吗？感谢您提供的资源，我将阅读。@oldo.nicho您似乎缺少
Badge
的导入，但这应该会引发一个错误…请尝试在
视图中包装
TabFooter
，谢谢@Supriya！嗯，所以我所要做的就是将
组件包装在
组件中。古怪的这是为什么？是的，我有一个相同的问题。你可以在NativeBase GitHub上提出这个问题。你的问题已经在这里得到了回答-很好，谢谢。只要我知道如何避开这个问题，一切都好。我将在GitHub上提出一个问题。
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;

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

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