[英]React Native Vector Icons won't show in Bottom Tab Navigation in Android
the icon shows in a screen/page, but won't show in the bottom navigation.图标显示在屏幕/页面中,但不会显示在底部导航中。 Solutions that I've tried:
我尝试过的解决方案:
./gradlew clean
then npx react-native run-android
, but same result./gradlew clean
然后./gradlew clean
npx react-native run-android
,但结果相同npx react-native link react-native-vector-icons
then npx react-native run-android
, but same resultnpx react-native link react-native-vector-icons
然后npx react-native run-android
,但结果相同screenshot bottom nav bar屏幕截图底部导航栏
screenshot setting screen截图设置画面
It does appear in screen/page as shown in above screenshot, but won't show in the bottom navigation.它确实出现在屏幕/页面中,如上图所示,但不会显示在底部导航中。
NOTE: I've tested both in emulator and real android device, but still got same result!注意:我已经在模拟器和真正的 android 设备中进行了测试,但仍然得到相同的结果!
Code for the bottom tab底部选项卡的代码
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({})
Also can you help why does the bottom tab goes to the next page??您还可以帮助为什么底部选项卡转到下一页? where should I edit the code, thanks in advance.
我应该在哪里编辑代码,提前致谢。 Below is the Screenshot:
下面是截图:
The issue is very simple actually, you are not returning anything from the function,这个问题实际上很简单,你没有从函数中返回任何东西,
tabBarIcon: ({color, size}) => {
//nothing returned here
<Ionicons name="settings-outline" color={color} size={size}
/>
You have to do this, either use brackets like below or use the return statement to your code.您必须这样做,要么使用如下方括号,要么在您的代码中使用 return 语句。
tabBarIcon: ({color, size}) => (
<Ionicons name="settings-outline" color={color} size={size}
/>)
First, make sure you use the icons correctly.首先,确保正确使用图标。
For example, suppose we use MaterialCommunityIcons
.例如,假设我们使用
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>
);
}
General usage is like this.一般用法是这样的。 Check the document for details.
查看文档了解详细信息。 https://reactnavigation.org/docs/bottom-tab-navigator/
https://reactnavigation.org/docs/bottom-tab-navigator/
In my case I hadn't added就我而言,我没有添加
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
申请自:“../../node_modules/react-native-vector-icons/fonts.gradle”
to the android/app/build.gradle as indicated in the [Oblador React Native Vector Icons README document][1] [1]: https://github.com/oblador/react-native-vector-icons#android到 android/app/build.gradle,如 [Oblador React Native Vector Icons README 文档][1] [1] 中所示:https://github.com/oblador/react-native-vector-icons#android
Once I added that, my icons displayed.一旦我添加了它,我的图标就会显示出来。
You need to create a custom tab bar component, and add the icons there.您需要创建一个自定义标签栏组件,并在那里添加图标。 React Navigation has a pretty good documentation - https://reactnavigation.org/docs/bottom-tab-navigator#tabbar
React Navigation 有一个非常好的文档 - https://reactnavigation.org/docs/bottom-tab-navigator#tabbar
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.