javascript - NativeBase FooterTab 在使用图标时返回错误

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

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

import { Icon } from 'native-base';

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

如果不是一个，那么它只会在第 142 行加载“名称”属性，这将导致错误，因为有 2 个子组件(“详细信息”文本和图标组件)。