React Native TabBarIcon 未显示在底部选项卡导航中

Question

我有一个本机反应应用程序，我创建了底部选项卡导航来显示不同的屏幕。 截至目前，图标根本没有显示，我不确定为什么。 我还收到一个我不理解的控制台错误，我很确定这是错误的一部分：

错误来自这行代码：

              <Ionicons name="home" color={color} size={size} />

位于

<TabNav.Screen 
          key='Home' 
          name="Home" 
          component={HomeScreen} 
          options={{
            tabBarShowLabel: false,
            tabBarIcon: ({ color, size }) => (
              <Ionicons name="home" color={color} size={size} />
          }}/> 

反应本机菜单：

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

import { Ionicons } from 'react-native-vector-icons'

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'

import MainScreen from './src/screens/MainScreen'
import FavoriteScreen from './src/screens/FavoriteScreen'
import FeedScreen from './src/screens/FeedScreen'
import InvestmentScreen from './src/screens/InvestmentScreen'
import ProfileScreen from './src/screens/ProfileScreen'


const TabNav = createBottomTabNavigator();
const StackNav = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <StatusBar
        animated={true}
        backgroundColor="#61dafb"
        barStyle={{color: 'black'}}/>
      <TabNav.Navigator screenOptions={{headerShown: false}}>
        <TabNav.Screen 
          key='Home' 
          name="Home" 
          component={MainScreen} 
          options={{
            tabBarShowLabel: false,
            showIcon: true,
            tabBarIcon: ({ color, size }) => (
              <Ionicons name="home" color={color} size={size} />
            ),
          }}
          /> 
        <TabNav.Screen 
          key='Favorites' 
          name="Favorites" 
          component={FavoriteScreen} 
          options={{
            tabBarShowLabel: false,
            showIcon: true,
            tabBarIcon: ({ color, size }) => (
              <Ionicons name="home" color={color} size={size} />
            ),
          }}
          />
        <TabNav.Screen 
          key='Feed' 
          name="Feed" 
          component={FeedScreen} 
          options={{
            tabBarShowLabel: false,
            showIcon: true,
            tabBarIcon: ({ color, size }) => (
              <Ionicons name="home" color={color} size={size} />
            ),
          }}
          />
        <TabNav.Screen 
          key='Propertyies' 
          name="Properties" 
          component={InvestmentScreen} 
          options={{
            tabBarShowLabel: false,
            showIcon: true,
            tabBarIcon: ({ color, size }) => (
              <Ionicons name="home" color={color} size={size} />
            ),
          }}
          />
        <TabNav.Screen 
          key='Profile' 
          name="Profile" 
          component={ProfileScreen} 
          options={{
            tabBarShowLabel: false,
            showIcon: true,
            tabBarIcon: ({ color, size }) => (
              <Ionicons name="home" color={color} size={size} />
            ),
          }}
          />
      </TabNav.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

底部标签导航中未显示图标或 label

这是我收到的控制台警告；

[Unhandled promise rejection: Error: Directory for 'file:///Users/omarjandali/Library/Developer/CoreSimulator/Devices/B09B927C-6596-4403-B931-0C83395BA279/data/Containers/Data/Application/5F76B516-64FE-45C5-8F6D-FA6448DC62BB/Library/Caches/ExponentExperienceData/%2540ohmarj%252Fryppe/ExponentAsset-b3263095df30cb7db78c613e73f9499a.ttf' doesn't exist. Please make sure directory '/Users/omarjandali/Library/Developer/CoreSimulator/Devices/B09B927C-6596-4403-B931-0C83395BA279/data/Containers/Data/Application/5F76B516-64FE-45C5-8F6D-FA6448DC62BB/Library/Caches/ExponentExperienceData/%40ohmarj%2Fryppe' exists before calling downloadAsync.]
at node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:106:50 in promiseMethodWrapper
at node_modules/expo-modules-core/build/NativeModulesProxy.native.js:15:23 in moduleName.methodInfo.name
at node_modules/expo-file-system/build/FileSystem.js:105:17 in downloadAsync
at node_modules/expo-file-system/build/FileSystem.js:101:7 in downloadAsync
at node_modules/expo-asset/build/PlatformUtils.js:52:25 in _downloadAsyncManagedEnv

[Unhandled promise rejection: Error: Directory for 'file:///Users/omarjandali/Library/Developer/CoreSimulator/Devices/B09B927C-6596-4403-B931-0C83395BA279/data/Containers/Data/Application/5F76B516-64FE-45C5-8F6D-FA6448DC62BB/Library/Caches/ExponentExperienceData/%2540ohmarj%252Fryppe/ExponentAsset-b3263095df30cb7db78c613e73f9499a.ttf' doesn't exist. Please make sure directory '/Users/omarjandali/Library/Developer/CoreSimulator/Devices/B09B927C-6596-4403-B931-0C83395BA279/data/Containers/Data/Application/5F76B516-64FE-45C5-8F6D-FA6448DC62BB/Library/Caches/ExponentExperienceData/%40ohmarj%2Fryppe' exists before calling downloadAsync.]
at node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:106:50 in promiseMethodWrapper
at node_modules/expo-modules-core/build/NativeModulesProxy.native.js:15:23 in moduleName.methodInfo.name
at node_modules/expo-file-system/build/FileSystem.js:105:17 in downloadAsync
at node_modules/expo-file-system/build/FileSystem.js:101:7 in downloadAsync
at node_modules/expo-asset/build/PlatformUtils.js:52:25 in _downloadAsyncManagedEnv

[Unhandled promise rejection: Error: Directory for 'file:///Users/omarjandali/Library/Developer/CoreSimulator/Devices/B09B927C-6596-4403-B931-0C83395BA279/data/Containers/Data/Application/5F76B516-64FE-45C5-8F6D-FA6448DC62BB/Library/Caches/ExponentExperienceData/%2540ohmarj%252Fryppe/ExponentAsset-b3263095df30cb7db78c613e73f9499a.ttf' doesn't exist. Please make sure directory '/Users/omarjandali/Library/Developer/CoreSimulator/Devices/B09B927C-6596-4403-B931-0C83395BA279/data/Containers/Data/Application/5F76B516-64FE-45C5-8F6D-FA6448DC62BB/Library/Caches/ExponentExperienceData/%40ohmarj%2Fryppe' exists before calling downloadAsync.]
at node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:106:50 in promiseMethodWrapper
at node_modules/expo-modules-core/build/NativeModulesProxy.native.js:15:23 in moduleName.methodInfo.name
at node_modules/expo-file-system/build/FileSystem.js:105:17 in downloadAsync
at node_modules/expo-file-system/build/FileSystem.js:101:7 in downloadAsync
at node_modules/expo-asset/build/PlatformUtils.js:52:25 in _downloadAsyncManagedEnv

[Unhandled promise rejection: Error: Directory for 'file:///Users/omarjandali/Library/Developer/CoreSimulator/Devices/B09B927C-6596-4403-B931-0C83395BA279/data/Containers/Data/Application/5F76B516-64FE-45C5-8F6D-FA6448DC62BB/Library/Caches/ExponentExperienceData/%2540ohmarj%252Fryppe/ExponentAsset-b3263095df30cb7db78c613e73f9499a.ttf' doesn't exist. Please make sure directory '/Users/omarjandali/Library/Developer/CoreSimulator/Devices/B09B927C-6596-4403-B931-0C83395BA279/data/Containers/Data/Application/5F76B516-64FE-45C5-8F6D-FA6448DC62BB/Library/Caches/ExponentExperienceData/%40ohmarj%2Fryppe' exists before calling downloadAsync.]
at node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:106:50 in promiseMethodWrapper
at node_modules/expo-modules-core/build/NativeModulesProxy.native.js:15:23 in moduleName.methodInfo.name
at node_modules/expo-file-system/build/FileSystem.js:105:17 in downloadAsync
at node_modules/expo-file-system/build/FileSystem.js:101:7 in downloadAsync
at node_modules/expo-asset/build/PlatformUtils.js:52:25 in _downloadAsyncManagedEnv

[Unhandled promise rejection: Error: Directory for 'file:///Users/omarjandali/Library/Developer/CoreSimulator/Devices/B09B927C-6596-4403-B931-0C83395BA279/data/Containers/Data/Application/5F76B516-64FE-45C5-8F6D-FA6448DC62BB/Library/Caches/ExponentExperienceData/%2540ohmarj%252Fryppe/ExponentAsset-b3263095df30cb7db78c613e73f9499a.ttf' doesn't exist. Please make sure directory '/Users/omarjandali/Library/Developer/CoreSimulator/Devices/B09B927C-6596-4403-B931-0C83395BA279/data/Containers/Data/Application/5F76B516-64FE-45C5-8F6D-FA6448DC62BB/Library/Caches/ExponentExperienceData/%40ohmarj%2Fryppe' exists before calling downloadAsync.]
at node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:106:50 in promiseMethodWrapper
at node_modules/expo-modules-core/build/NativeModulesProxy.native.js:15:23 in moduleName.methodInfo.name
at node_modules/expo-file-system/build/FileSystem.js:105:17 in downloadAsync
at node_modules/expo-file-system/build/FileSystem.js:101:7 in downloadAsync
at node_modules/expo-asset/build/PlatformUtils.js:52:25 in _downloadAsyncManagedEnv

Answer 1

尝试重新安装依赖项

1. 删除node_modules文件夹
2. 运行npm install
3. 运行npx expo start或npm start

Answer 2

如果你使用Expo Cli尝试Expo 图标