2

该图标显示在屏幕/页面中，但不会显示在底部导航中。我尝试过的解决方案：

  • 按照github的安装指南，我尝试了GRADLE和MANUAL选项，但结果相同
  • 曾经尝试过./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({})

你也能帮忙为什么底部标签转到下一页吗？我应该在哪里编辑代码，提前谢谢。下面是截图： 在此处输入图像描述

4

4 回答 4

4

这个问题实际上很简单，你没有从函数中返回任何东西，

    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} 
    />)
于 2020-11-05T09:14:03.673 回答
0

首先，确保正确使用图标。

例如，假设我们使用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/

于 2020-11-04T12:41:35.643 回答
0

就我而言，我没有添加

申请自：“../../node_modules/react-native-vector-icons/fonts.gradle”

到 [Oblador React Native Vector Icons README 文档][1] [1] 中所示的 android/app/build.gradle：https://github.com/oblador/react-native-vector-icons#android

添加后，我的图标就会显示出来。

于 2021-08-28T05:57:40.200 回答
-2

您需要创建一个自定义标签栏组件，并在那里添加图标。React Navigation 有一个非常好的文档 - https://reactnavigation.org/docs/bottom-tab-navigator#tabbar

于 2020-11-04T12:37:42.243 回答