昨天我开始使用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;
编辑: 这篇文章帮助了我: https://medium.com/clarusway/setting-up-react-native-vector-icons-for-ios-a5d57e78cdb2
问题出在这部分代码
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}
/>
);
},
})}
>