Question

我对nativebase Footer有疑问我有容器，如果我包含MyFooter，它会给我这个错误：元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：undefined。您可能忘记从其定义的文件中导出组件。

// main.js
import MyFooter from './MyFooter';
...
<Container>
    <MyHeader title="Оплаты" />
    <Content></Content>
    <MyFooter />
  </Container>

页脚组件

// MyFooter.js
const MyFooter = props => {
  return (
    <Footer>
      <FooterTab>
        <Button vertical active>
          <Text>Info</Text>
        </Button>
        <Button vertical >
            <Text>Remove</Text>
        </Button>
      </FooterTab>
    </Footer>
  );
}
export default MyFooter;

但是如果我像这样更改MyFooter的渲染方法：

// MyFooter.js
return (
  <View>
    <Text>
      Test
    </Text>
  </View>
)

因此问题不在导出/导入中，因为MyFooter中的另一个渲染都可以完美地工作。有人可以帮帮忙吗？

回答 - 从＆＃39; react-native＆＃39;导入{文字，页脚，页脚，按钮，图标}; （＆＃39;反应本地＆＃39;而不是＆＃39;原生基地＆＃39;）

Answer 1

这是您的MyFooter组件尝试首先导出组件export default MyFooter，如下所示：

const MyFooter = () => (   
  <Footer>
    <FooterTab>
      <Button vertical active>
        <Icon name="information" />
        <Text>Инфо</Text>
      </Button>
      <Button vertical >
        <Icon name="add" />
        <Text>Оплаты</Text>
      </Button>
      <Button vertical >
        <Icon name="remove" />
        <Text>Снятия</Text>
      </Button>
    </FooterTab>
  </Footer>
);

export default MyFooter;

Answer 2

如果您完全按原样粘贴代码，那么在MyFooter.js中的return语句之后，您将错过结束括号

React-Native：元素类型无效

2 个答案: