我使用的是react导航v2和react原生矢量图标。
我正在尝试在react原生标签导航器中添加一个图标。
图标显示如果它不在标签页导航。图标没有显示在标签页导航,我找不到一个坚实的例子,如何添加一个图标在标签页导航。
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createMaterialTopTabNavigator } from 'react-navigation'
import Home from '../HomePage.js'
import Profile s from '../ProfilePage.js'
import Icon from 'react-native-vector-icons/FontAwesome';
export const Tabs = createMaterialTopTabNavigator(
{
HomePage: {
screen: Home,
navigationOptions: {
tabBarLabel:"Home Page",
tabBarIcon: ({ tintColor }) => (
<Icon name="home" size={30} color="#900" />
)
},
},
ProfilePage: {
screen: Profile,
navigationOptions: {
tabBarLabel:"Profile Page",
tabBarIcon: ({ tintColor }) => (
<Icon name="users" size={30} color="#900" />
)
}
},
},
{
order: ['HomePage', 'ProfilePage'],
tabBarOptions: {
activeTintColor: '#D4AF37',
inactiveTintColor: 'gray',
style: {
backgroundColor: 'white',
}
},
},
)
4条答案
按热度按时间9jyewag01#
想明白了得加上
此后,图标显示。
laik7k3q2#
这对我来说很有效,不需要启用
showIcon:true
。我正在使用
Ionicons
图标包。o2gm4chl3#
您也可以简单地在Tab. Screen的帮助下添加它
首先从博览会导入图标
或从此处选择任何图标:https://icons.expo.fyi/
那就这样用吧
wfypjpf44#
设置activeTintColor也可以达到这个目的。