React native 本地反应:看不到FontAwesome或任何其他expo/vector图标
我正面临着一些图标方面的问题。(我试过MaterialCommunityIcons和普通图标,但结果相同) 它们不会出现在底部选项卡导航中,也不会出现在社交网络下。(其他图标来自“反应本机设置”页面) 以下是一个屏幕截图: 以下是选项卡导航:React native 本地反应:看不到FontAwesome或任何其他expo/vector图标,react-native,expo,React Native,Expo,我正面临着一些图标方面的问题。(我试过MaterialCommunityIcons和普通图标,但结果相同) 它们不会出现在底部选项卡导航中,也不会出现在社交网络下。(其他图标来自“反应本机设置”页面) 以下是一个屏幕截图: 以下是选项卡导航: import React from 'react'; import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; import { Materia
import React from 'react';
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { MaterialCommunityIcons } from '@expo/vector-icons';
import HomeNavigator from '../navigation/HomeNavigator';
import NewsNavigator from '../navigation/NewsNavigator';
import settings from '../config/settings';
import i18n from "../locales/i18n";
const Tab = createBottomTabNavigator();
function TabNavigation(props) {
return (
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ color }) => {
let iconName;
if (route.name === 'Home') {
iconName = 'home';
}
else if (route.name === 'News') {
iconName = 'newspaper';
}
// You can return any component that you like here!
return <MaterialCommunityIcons color={color} icon={iconName} size={25} />;
},
})}
tabBarOptions={{
activeTintColor: settings.colors.activecolor,
inactiveTintColor: settings.colors.fontcolor,
activeBackgroundColor: settings.colors.navigation,
inactiveBackgroundColor:settings.colors.navigation,
}}
>
<Tab.Screen name="Home" options={{ tabBarLabel: i18n.t('navigation.home') }} component={HomeNavigator} />
<Tab.Screen name="News" options={{ tabBarLabel: i18n.t('navigation.news') }} component={NewsNavigator} />
</Tab.Navigator>
);
}
export default TabNavigation;
您正在使用tabBarIcon作为导航器的一部分,这应该传递到屏幕级别的选项,如下所示
<Tab.Screen
name="Home"
options={{
tabBarLabel: i18n.t('navigation.home'),
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="home" color={color} size={20} />
),
}}
component={HomeNavigator}
/>
<Tab.Screen
name="News"
options={{
tabBarLabel: i18n.t('navigation.news'),
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="newspaper" color={color} size={20} />
),
}}
component={NewsNavigator}
/>
(
),
}}
组件={HomeNavigator}
/>
(
),
}}
组件={NewsNavigator}
/>
我认为这不是问题所在。在我的另一个应用程序中,它正在工作。我从官方文档中找到了这个解决方案:您可以登录控制台并查看iconName和route.name吗?并尝试这种方法。它显示了正确的图标和路线。它还会更改活动选项卡的颜色。我把一个图标放在另一个屏幕上进行测试,它也不可见。奇怪,因为我在我的另一个应用程序中使用了相同的lib@expo/vector图标。您是否在控制台中记录或调试并检查这些值?我想不出它不起作用的原因我做了控制台日志。我还尝试了删除的node_模块和npm安装,我的屏幕上没有任何变化:(
<Tab.Screen
name="Home"
options={{
tabBarLabel: i18n.t('navigation.home'),
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="home" color={color} size={20} />
),
}}
component={HomeNavigator}
/>
<Tab.Screen
name="News"
options={{
tabBarLabel: i18n.t('navigation.news'),
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="newspaper" color={color} size={20} />
),
}}
component={NewsNavigator}
/>