React Native 图标从社区材料图标不加载

daolsyd0  于 2023-11-21  发布在  React
关注(0)|答案(1)|浏览(134)

昨天我开始使用react-native,我遇到了来自react-native-vector-icons/MaterialCommunityIcons的图标问题,我安装了必要的软件包,但所有的图标都是问号,甚至改变颜色或大小也可以
这是我的代码:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Settings from './Settings';
import Exercises from './Exercises';
import Home from './Home';
import Stats from './Stats';
import Workout from './Workout';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'

const Tab = createBottomTabNavigator();

function Tabs (){
    return(
        <Tab.Navigator
        screenOptions={({ route }) => ({
            tabBarIcon: () => {
              const icons: Record<string, string> = {
                Home: "home",
                Stats: "chart-bar",
                Workout: "dumbbell",
                Exercises: "weight-lifter",
                Settings: "cog",
              };
        
              return (
                <MaterialCommunityIcons
                  name={icons[route.name]}
                  color= "black"
                  size={24}
                />
              );
            },
          })}
        >
            <Tab.Screen name="Home" component={Home} />
            <Tab.Screen name="Stats" component={Stats} />
            <Tab.Screen name="Workout" component={Workout} />
            <Tab.Screen name="Exercises" component={Exercises} />
            <Tab.Screen name="Settings" component={Settings} />
        </Tab.Navigator>
    )
}
export default Tabs;

字符串
iOS模拟器:x1c 0d1x
编辑:这篇文章帮助了我:https://medium.com/clarusway/setting-up-react-native-vector-icons-for-ios-a5d57e78cdb2

bf1o4zei

bf1o4zei1#

问题是这部分代码name={icons[route.name]}
如果要使用图标列表,请传递index而不是route.name
代码更新:

<Tab.Navigator
  screenOptions={({ route, index }) => ({
     tabBarIcon: () => {
      const icons: Record<string, string> = {
           Home: "home",
           Stats: "chart-bar",
           Workout: "dumbbell",
           Exercises: "weight-lifter",
           Settings: "cog",
       };
      
  return (
     <MaterialCommunityIcons
       name={icons[index]}
       color= "black"
       size={24}
     />
   );
  },
  })}
>

字符串

相关问题