用react-native-vector-icons反应Native Web问题

问题描述

我已经在React Native Web中建立了一个网站。 我正在努力做两件事 1.）反应未见到的本机矢量图标 2.）我如何部署此网站。

解决方法

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

在您的webpack配置文件中，添加一个部分以使用url-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

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