将导入的图标添加到 TabBarIOS.Item答案

【问题标题】：Adding imported icons to TabBarIOS.Item将导入的图标添加到 TabBarIOS.Item
【发布时间】：2016-10-21 01:32:02
【问题描述】：

我正在尝试将 FontAwesome 图标合并到我的 React-Native TabBarIOS 中，但我似乎无法弄清楚如何。有人知道这样做的方法吗？这是我的 TabBarIOS.Items 之一的示例：

<TabBarIOS.Item
      selected={this.state.selectedTab === 'searchTab'}
      title={'Search Books'}
      onPress={() => this.navigateToTab('searchTab')}>
      <SearchView/>
    </TabBarIOS.Item>

【问题讨论】：

标签： reactjs tabs icons react-native tabbar

【解决方案1】：

您可以使用react-native-vector-icons 来实现此目的。

安装包：npm install --save react-native-vector-icons

在您的组件页面上导入插件import Icon from 'react-native-vector-icons/FontAwesome';

您的 TabbarIos 组件：

<TabBarIOS>
      <Icon.TabBarItem
        title="Search Books"
        iconName="fa-search"
        selectedIconName="fa-search"
        >
        <View style={styles.searchStyle}><Text>Search Books ...</Text></View>
      </Icon.TabBarItem>
</TabBarIOS>

如果您不想使用 3rd 方插件，react-native TabBarIos 有一个示例。

您首先必须将图标图像转换为 base64。这个online tool 应该有帮助/

var base64Icon = 'data:image/png;base64,.........';

<TabBarIOS.Item
      title="Blue Tab"
      icon={{uri: base64Icon, scale: 3}}  //here
      selected={this.state.selectedTab === 'blueTab'}
      onPress={() => {
        this.setState({
          selectedTab: 'blueTab',
        });
      }}>
      {this._renderContent('#414A8C', 'Blue Tab')}
    </TabBarIOS.Item>

【讨论】：

是的，我想通了，并试图发布答案，我想它没有通过，不过谢谢。