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

Question

我在 React Native Web 中创建了一个网站。我正在努力解决两件事 1.) 未看到反应原生矢量图标 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);

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

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

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