react-native-svg-transformer 弄乱字体react-native-vector-icons

问题描述

我正在尝试为我的 React Native 应用程序（使用 expo）添加 svg 支持

所以我按照 docs of react-native-svg-transformer 在我的应用程序的根目录添加了一个 metro.config.js。

在 the guide 不是很有帮助的情况下苦苦挣扎

我不得不：

感谢 this comment 了解版本/兼容性
尝试导入并发现我应该将 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} />

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

这些图标是如何设置的：

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'} />

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

fonts react-native react-native-vector-icons svg