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

Question

我正在尝试将 FontAwesome 图标合并到我的 React-Native 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>

如果您不想使用第 3 方插件，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>

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

Adding imported icons to TabBarIOS.Item

reactjs

tabs

icons

react-native

tabbar