将导入图标添加到tabbarios.item

Question

我试图将fontawesome图标纳入我的反应tabbarios，但我似乎无法弄清楚如何。有人知道这样做的方法吗？这是我的tabbarios.items之一的示例：

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

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

如果您不想使用第三方插件，则React-Native Tabbarios有一个示例。

您首先必须将图标图像转换为base64。该在线工具应有所帮助/

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>