使用 react-native-vector-icons React Native Web 问题

Question

我用 React Native Web 做了一个网站。有两件事我正在努力 1.) React 本机矢量图标未见 2.) 我如何部署这个网站。

Answer 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);

要回答您的第二个问题，请访问此 link:

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

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

使用 react-native-vector-icons React Native Web 问题

React Native Web issue with react-native-vector-icons

react-native

react-native-web

react-native-vector-icons