React Native 矢量圖標不會顯示在 Android 的底部選項卡導航中

Question

圖標顯示在屏幕/頁面中，但不會顯示在底部導航中。 我嘗試過的解決方案：

• 按照github的安裝指南進行操作，我嘗試了GRADLE和MANUAL選項，但結果相同
• 曾嘗試./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({})

您還可以幫助為什么底部選項卡轉到下一頁？ 我應該在哪里編輯代碼，提前致謝。 下面是截圖：

Answer 1

這個問題實際上很簡單，你沒有從函數中返回任何東西，

    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} 
    />)

Answer 2

首先，確保正確使用圖標。

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

Answer 3

就我而言，我沒有添加

申請自：“../../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

一旦我添加了它，我的圖標就會顯示出來。

Answer 4

您需要創建一個自定義標簽欄組件，並在那里添加圖標。 React Navigation 有一個非常好的文檔 - https://reactnavigation.org/docs/bottom-tab-navigator#tabbar