React native react本机svg转换器与字体混淆（react本机矢量图标）

我正在尝试将svg支持添加到我的react原生应用程序（使用expo）

因此，我遵循了在我的应用程序根目录下添加了a

metro.config.js

在挣扎于它的形态之后，它并没有太大的帮助

我必须：

• 感谢您提供的版本/兼容性
• 玩导入游戏，发现我应该将

  require（'@expo/metro-config）

  修改为

  require（'metro-config'）

• 手动添加一些文件扩展名

下面是最后的metro.config.js：

const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
  const defaultConf = await getDefaultConfig();
  const {
    resolver: { sourceExts, assetExts },
  } = defaultConf;
  const otherExtensions = [
    'expo.ts',
    'expo.tsx',
    'expo.js',
    'expo.jsx',
    'ts',
    'tsx',
    'js',
    'jsx',
    'json',
    'wasm',
    'svg',
    'svgx',
    'ttf',
    'otf',
  ];
  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== 'svg'),
      sourceExts: [...sourceExts, ...otherExtensions],
    },
  };
})();

现在我终于可以像这样导入我的svg了：

import Rocket from '../../assets/rocket.svg';
[...]
<Rocket width={120} height={120} />

从“../../assets/Rocket.svg”导入火箭；
[...]

但所有以前有效的方法现在都失败了。他们只是变成了正方形（菜单图标和主页图标）或者更糟的。。。变成奇怪的图标。。。参见“陀螺仪”菜单上方“”图标下方的示例：

如何设置这些图标：

import FontAwesome5 from '@expo/vector-icons/FontAwesome5';
import Icon from '@expo/vector-icons/FontAwesome5';

<Icon name='rocket' size={30} color='#900' />
<FontAwesome5 name={'caret-down'} />

从“@expo/vector icons/FontAwesome5”导入FontAwesome5；
从“@expo/vector icons/FontAwesome5”导入图标；