使用图标时 NativeBase FooterTab returns 错误

Question

我使用 Native Base docs 作为创建 FooterTab 的基础。

如果我将图标元素添加到按钮，我会收到以下错误：undefined is not an object (evaluation 'child.props.children.props.name') from FooterTab.js:114 (has since changed, now line 142).

下面是我在渲染函数中使用的代码：

<Footer>
      <FooterTab>
          <Button active={this.state.detailsTab} onPress={() => this.toggleDetailsTab()}>
              Details
              <Icon name='ios-home' style={globalStyles.inspectionsItemIcon} />
          </Button>
          <Button active={this.state.inspectionTab} onPress={() => this.toggleInspectionTab()}>
              Inspection
          </Button>
          <Button active={this.state.insectsTab} onPress={() => this.toggleInsectsTab()}>
              Insects
          </Button>
          <Button active={this.state.radonTab} onPress={() => this.toggleRadonTab()}>
              Radon
          </Button>
      </FooterTab>
</Footer>

如果我从第一个按钮中删除图标，一切正常。

有什么想法吗？提前致谢。

Answer 1

请检查您的图标组件是否是从 NativeBase 导入的：

import { Icon } from 'native-base';

FooterTab.js 在第 88 行检查 NativeBase 的图标组件。

如果不是一个，那么它将只在第 142 行加载 'name' 属性这将导致错误，因为有 2 个子组件（'Details' 文本和图标组件).

Answer 2

您指的是以前版本的文档

勾选Footer Tab with the latest docs

您还可以查看 NativeBase KitchenSink，其中展示了 NativeBase 组件。

在 NativeBase KitchenSink

中检查 Footer Tab

使用图标时 NativeBase FooterTab returns 错误

NativeBase FooterTab returns error when using an Icon

javascript

react-native

native-base