NativeBase FooterTab 在使用图标时返回错误答案

【问题标题】：NativeBase FooterTab returns error when using an IconNativeBase FooterTab 在使用图标时返回错误
【发布时间】：2016-10-27 02:17:54
【问题描述】：

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

如果我将 Icon 元素添加到按钮，我会收到以下错误：未定义不是来自 FooterTab.js:114 的对象（评估 'child.props.children.props.name'）（已经更改，现在 @ 987654322@).

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

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

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

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

【问题讨论】：

标签： javascript react-native native-base

【解决方案1】：

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

import { Icon } from 'native-base';

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

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

【讨论】：

已解决，非常感谢！！！我正在像这样导入图标：从'react-native-vector-icons/Ionicons'导入图标。将其切换为您的建议，它解决了我的问题。
不客气。如果您只想显示 Icon 组件，那么从“react-native-vector-icons”导入组件应该可以在 FooterTab 中正常工作。否则，您必须从 NativeBase 导入它。

【解决方案2】：

您指的是以前版本的文档

用最新的docs检查Footer Tab

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

在 NativeBase KitchenSink 中检查 Footer Tab

【讨论】：