React Native Web 问题与 react-native-vector-icons答案

【问题标题】：React Native Web issue with react-native-vector-iconsReact Native Web 问题与 react-native-vector-icons
【发布时间】：2020-09-30 07:51:47
【问题描述】：

我在 React Native Web 中创建了一个网站。我正在努力解决两件事 1.) 反应原生矢量图标未见 2.) 我如何部署这个网站。

【问题讨论】：

标签： react-native react-native-web react-native-vector-icons

【解决方案1】：

对于您的第一个查询，请按照以下步骤操作：

在你的 webpack 配置文件中，添加一个部分来使用 url-loader（或 file-loader）处理 ttf 文件

{
  test: /\.ttf$/,
  loader: "url-loader", // or directly file-loader
  include: path.resolve(__dirname, "node_modules/react-native-vector-icons"),
},

然后在你的 JavaScript 入口点使用这些文件来获取捆绑的 url 并在你的页面中注入一个样式标签：

// Use prebuilt version of RNVI in dist folder
import Icon from 'react-native-vector-icons/dist/FontAwesome';

// Generate required css
import iconFont from 'react-native-vector-icons/Fonts/FontAwesome.ttf';
const iconFontStyles = `@font-face {
  src: url(${iconFont});
  font-family: FontAwesome;
}`;

// Create stylesheet
const style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
  style.styleSheet.cssText = iconFontStyles;
} else {
  style.appendChild(document.createTextNode(iconFontStyles));
}

// Inject stylesheet
document.head.appendChild(style);

要回答您的第二个问题，请访问此链接：

https://www.youtube.com/watch?v=9McfnAxz23M

并按照相应的步骤进行操作。

【讨论】：

这行得通。非常感谢。