[英]React Native Vector Icons won't show in Bottom Tab Navigation in Android
图标显示在屏幕/页面中,但不会显示在底部导航中。 我尝试过的解决方案:
./gradlew clean
然后./gradlew clean
npx react-native run-android
,但结果相同npx react-native link react-native-vector-icons
然后npx react-native run-android
,但结果相同屏幕截图底部导航栏
截图设置画面
它确实出现在屏幕/页面中,如上图所示,但不会显示在底部导航中。
注意:我已经在模拟器和真正的 android 设备中进行了测试,但仍然得到相同的结果!
底部选项卡的代码
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import ProductNavigation from './ProductNavigation'
import SettingScreen from '../screen/SettingScreen'
const BottomTab = createBottomTabNavigator();
const BottomTabNav = () => {
return (
<BottomTab.Navigator>
<BottomTab.Screen
name="Home"
component={ProductNavigation}
options={{
tabBarLabel: "Home",
tabBarIcon:({color, size}) => {
<Ionicons name="home-outline" color={color} size={size} />
}}} />
<BottomTab.Screen
name="Settings"
component={SettingScreen}
options={{
tabBarLabel: "Settings",
tabBarIcon: ({color, size}) => {
<Ionicons name="settings-outline" color={color} size={size}
/>
}}} />
</BottomTab.Navigator>
)
}
export default BottomTabNav
const styles = StyleSheet.create({})
这个问题实际上很简单,你没有从函数中返回任何东西,
tabBarIcon: ({color, size}) => {
//nothing returned here
<Ionicons name="settings-outline" color={color} size={size}
/>
您必须这样做,要么使用如下方括号,要么在您的代码中使用 return 语句。
tabBarIcon: ({color, size}) => (
<Ionicons name="settings-outline" color={color} size={size}
/>)
首先,确保正确使用图标。
例如,假设我们使用MaterialCommunityIcons
。
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator
initialRouteName="Home"
tabBarOptions={{
activeTintColor: '#e91e63',
}}
>
<Tab.Screen
name="Home"
component={Home}
options={{
tabBarLabel: 'Home',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Settings"
component={Settings}
options={{
tabBarLabel: 'Updates',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="settings" color={color} size={size} />
),
tabBarBadge: 3,
}}
/>
Tab.Navigator>
);
}
一般用法是这样的。 查看文档了解详细信息。 https://reactnavigation.org/docs/bottom-tab-navigator/
就我而言,我没有添加
申请自:“../../node_modules/react-native-vector-icons/fonts.gradle”
到 android/app/build.gradle,如 [Oblador React Native Vector Icons README 文档][1] [1] 中所示:https://github.com/oblador/react-native-vector-icons#android
一旦我添加了它,我的图标就会显示出来。
您需要创建一个自定义标签栏组件,并在那里添加图标。 React Navigation 有一个非常好的文档 - https://reactnavigation.org/docs/bottom-tab-navigator#tabbar
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.