react-native - React Native 矢量图标不会显示在 Android 的底部选项卡导航中

Question

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

• 按照 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({})

您还可以帮忙解释为什么底部选项卡会转到下一页吗？我应该在哪里编辑代码，提前谢谢。下面是屏幕截图:

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