我正在使用react-navigation v2和react native 矢量图标。
我正在尝试在 react native 选项卡导航器中添加一个图标。
如果图标不在选项卡导航器中,则会显示该图标。该图标没有显示在选项卡导航器中,我找不到如何在选项卡导航器中添加图标的可靠示例。
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',
}
},
},
)
最佳答案
您也可以借助 Tab.Screen 简单地添加它
首先从expo导入图标
import { Ionicons } from '@expo/vector-icons';
或从此处选择任何图标:https://icons.expo.fyi/
然后像这样使用它
<Tab.Screen
name="Feed"
component={Feed}
options={{
tabBarLabel: 'Home',
tabBarIcon: ({ color, size }) => (
<Ionicons name="home" color={color} size={size} />
),
}}
/>
关于reactjs - React Navigation 中的选项卡导航器图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50436313/