react-native-web 阿里字体图标ttf文件不加载、乱码问题

前言

本文基于

• “react-native”: “^0.73.0”
• “react-native-web”: “^0.19.10”

问题

1.安装依赖

yarn add url-loader --dev

2.配置 webpack.config.js

include：存放字体图标文件的相对路径

module.exports = {
	...
	module: {
      rules: [
        ...
        {
          test: /\.ttf$/,
          loader: 'url-loader',
          include: path.resolve(__dirname, './src/assets/fonts/iconfont.ttf'),
        }
    ]
  },
}

3.修改 index.web.js 文件

import { AppRegistry } from 'react-native';
import App from './App.tsx';

AppRegistry.registerComponent('App', () => App);

AppRegistry.runApplication('App', {
  rootTag: document.getElementById('root')
});

// 存放字体图标文件的相对路径
import iconFont from './src/assets/fonts/iconfont.ttf';
const iconFontStyles = `@font-face {
  src: url(${iconFont});
  font-family: 'iconfont';
}`;

// 创建样式表
const style = document.createElement('style');
if (style.styleSheet) {
  style.styleSheet.cssText = iconFontStyles;
} else {
  style.appendChild(document.createTextNode(iconFontStyles));
}

// 添加到head
document.head.appendChild(style);

4.效果图

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。