反应本机 MaterialCommunityIcons 在顶部选项卡导航器版本 5 中不起作用

Question

顶部选项卡导航工作，但图标不显示，仅显示屏幕名称，我正在使用react-navigation版本5，如果不是materialcommunityicons，则可以在顶部栏导航中使用其他替代方案以及如何使用它。

import React from 'react';
import {Text, View} from 'react-native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import {MaterialCommunityIcons} from 'react-native-vector-icons/MaterialCommunityIcons'

const tab = createMaterialTopTabNavigator();

function DetailsScreen() {
return (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>Details</Text>
  </View>
);
}

function SettingScreen() {
return (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>Syllabus!</Text>
  </View>
);
}

 function ProfileScreen() {
  return (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>Awards!</Text>
  </View>
);
}
const Mytabs = () =>{
 return(
 <tab.Navigator initialRouteName="home">
    <tab.Screen options={{
      tabBarLabel: 'Home',
      tabBarIcon: () => (
        <MaterialCommunityIcons name="home" />
      ),
    }}name="Home" component={DetailsScreen}  />
    <tab.Screen name="Settings" component={SettingScreen} />
    <tab.Screen name="Profile" component={ProfileScreen} />
    
    
  </tab.Navigator>
  
   );
   }
export default Mytabs;

Answer 1

首先安装，然后请运行此命令：

react-native link react-native-vector-icons

Answer 2

打开 android/app/build.gradle 并添加以下内容：

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Answer 3

这确实是简单的解决方案。

1. 将其添加到 android/app/build.gradle -- 从以下位置申请：“../../node_modules/react-native-vector-icons/fonts.gradle”

2. 现在您需要将“react-native-vector-icons”模块链接到React Native。即使您的版本高于 70 或其他版本，也请执行此操作。 -- npx React-Native 链接 React-Native-Vector-icons -- npx react-native run-android