使用 react-native-ionicons 和 material-bottom-tabs 不显示反应原生图标（用十字显示）答案

【问题标题】：react native icon not displaying using react-native-ionicons and material-bottom-tabs ( displaying with a cross )使用 react-native-ionicons 和 material-bottom-tabs 不显示反应原生图标（用十字显示）
【发布时间】：2021-08-31 12:21:53
【问题描述】：

我是本机反应的新手，并试图开发一个简单的屏幕，带有页眉页脚和页脚上的一些图标这是我的缩写代码：

import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import Icon from 'react-native-ionicons';

const BottomNavigator = () => {
return (
  <BottomTab.Navigator>
  <BottomTab.Screen name="Home" component={HomeScreen} options={{
  tabBarIcon: ({ color, size }) => (
    <Icon ios="ios-addx" android="md-addx"  color={color} size={size} />
  )
  }}/>
  <BottomTab.Screen name="Settings" component={SettingsScreen} options={{
  tabBarIcon: ({ color, size }) => (
    <Icon name="home"  size={size} color={color} />
  )
}}/>
</BottomTab.Navigator>
);
}

这是显示的内容：

阅读关于 SO 的各种答案 - 其中大多数似乎与“反应原生矢量图标”有关，而我正在使用“反应原生离子图标”

尝试使用以下命令链接：

react-native link react-native-ionicons

但是我得到了错误：

internal/modules/cjs/loader.js:960
throw err;
^

Error: Cannot find module 
'C:\Users\user\AppData\Roaming\npm\node_modules\react-native-cli\index.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:957:15)
at Function.Module._load (internal/modules/cjs/loader.js:840:27)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
at internal/main/run_main_module.js:18:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}

谢谢

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

您好，在文件 android/app/build.gradle 和 react-native run-android 中再次添加这一行

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

【讨论】：

感谢昨天的帮助，但我观察到的一个问题是出现的图标很奇怪，对于“主页”，出现了一个完全不同的图标，不知道为什么...<Icon name="brush" /> 确实不显示画笔图标它的一些不同的图标...
您导入的图标无效，您必须像这样从 'react-native-vector-icons/MaterialIcons' 导入图标，然后您必须访问矢量图标网站以获取材质图标名称的名称给标签
你也可以单独导入，如果你想使用 FontAwesome，你可以从 'react-native-vector-icons/FontAwesome' 导入 FontAwesome，你可以使用
谢谢您的出色回答，是的，您是正确的！再次感谢“shukriya”和“dhanyavaad”:)
@akila 欢迎 :)