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>

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

1 个答案: