无法在 Nextjs 中加载 Expo 矢量图标

Question

我在几天内尝试了很多不同的方法来做到这一点，但运气绝对为零。

我正在尝试使用 Solito Nativebase Universal Typescript 存储库来执行此操作：

https://github.com/GeekyAnts/nativebase-templates/tree/master/solito-universal-app-template-nativebase-typescript

我已阅读并尝试了此页面上的所有内容至少十几次：

https://github.com/GeekyAnts/nativebase-templates/issues/43

我当前的next.config.js文件如下所示：

/** @type {import('next').NextConfig} */

const { withNativebase } = require('@native-base/next-adapter')
const withImages = require('next-images')
const { withExpo } = require('@expo/next-adapter')
const withFonts = require('next-fonts')

module.exports = withNativebase({
  dependencies: [
    '@expo/next-adapter',
    'next-images',
    'react-native-vector-icons',
    'react-native-vector-icons-for-web',
    'solito',
    'app',
  ],
  plugins: [
    [withFonts, { projectRoot: __dirname }],
    withImages,
    [withExpo, { projectRoot: __dirname }],
  ],
  nextConfig: {
    images: {
      disableStaticImages: true,
    },
    projectRoot: __dirname,
    reactStrictMode: true,
    webpack5: true,
    webpack: (config, options) => {
      config.resolve.alias = {
        ...(config.resolve.alias || {}),
        'react-native$': 'react-native-web',
        '@expo/vector-icons': 'react-native-vector-icons',
      }
      config.resolve.extensions = [
        '.web.js',
        '.web.ts',
        '.web.tsx',
        ...config.resolve.extensions,
      ]
      return config
    },
  },
})

我也尝试过@native-base/icons再次使用，但没有运气。

我的最终用例是这样的：

export const Cart = (props: IIconStyles) => {
  return (
    <Icon
      as={FontAwesome5}
      name="shopping-cart"
      size={props.size ? props.size : 6}
      color="gray.200"
    />
  )

理论上它应该显示一个购物车，但相反，这就是我所看到的：

很明显，存在一些字体问题或其他问题，导致其无法加载到实际的 SVG 中。

我不知道这是什么 - 我尝试重写我的 _document.tsx 文件，如下所示：

https://docs.nativebase.io/nb-icons

我尝试将其添加到我的next.config.js：

 config.module.rules.push({
   test: /\.ttf$/,
   loader: "url-loader", // or directly file-loader
   include: path.resolve(__dirname, "node_modules/@native-base/icons"),
 });

当我尝试做这样的事情时：

import fontsCSS from '@native-base/icons/FontsCSS';

在我的_document.tsx文件中，我收到以下错误：

Module not found: Can't resolve '@native-base/icons/lib/FontsCSS'

尽管事实上我已经在我的 package.json 中安装了 @native-base/icons，并且按照上面的说明链接将其放在我的 Babel 文件中。

如何让矢量图标在 Next 中工作？

注意，这具体是Next/Expo/React Native

Answer 1

您可以next-adapter-icons 在此处阅读有关设置的更多信息。

我用以下方法让它工作，

• next.config.js

const { withNativebase } = require("@native-base/next-adapter");
const path = require("path");

module.exports = withNativebase({
  dependencies: ["@native-base/icons", "react-native-web-linear-gradient"],
  nextConfig: {
    webpack: (config, options) => {
      config.module.rules.push({
        test: /\.ttf$/,
        loader: "url-loader", // or directly file-loader
        include: path.resolve(__dirname, "node_modules/@native-base/icons"),
      });
      config.resolve.alias = {
        ...(config.resolve.alias || {}),
        "react-native$": "react-native-web",
        "react-native-linear-gradient": "react-native-web-linear-gradient",
        "@expo/vector-icons": "react-native-vector-icons",
      };
      config.resolve.extensions = [
        ".web.js",
        ".web.ts",
        ".web.tsx",
        ...config.resolve.extensions,
      ];
      return config;
    },
  },
});

• pages/_document.js

import React from 'react';
import { DocumentContext, DocumentInitialProps } from 'next/document';
import { default as NativebaseDocument } from '@native-base/next-adapter/document'

// Icon Font Library Imports
import MaterialIconsFont from '@native-base/icons/FontsCSS/MaterialIconsFontFaceCSS';
import EntypoFontFaceCSS from '@native-base/icons/FontsCSS/EntypoFontFaceCSS';
const fontsCSS = `${MaterialIconsFont} ${EntypoFontFaceCSS}`;

export default class Document extends NativebaseDocument {

  static async getInitialProps(ctx) {
    const props = await super.getInitialProps(ctx);
    const styles = [
      <style key={'fontsCSS'} dangerouslySetInnerHTML={{ __html: fontsCSS }} />,
      ...props.styles,
    ]
    return { ...props, styles: React.Children.toArray(styles) }
  }
}

• pages/index.tsx

import React from "react";
import { Box, Icon } from "native-base";
import Entypo from "@expo/vector-icons/Entypo";

export default function App() {
  return (
    <Box>
      <Icon
        as={Entypo}
        name="user"
        color="coolGray.800"
        _dark={{
          color: "warmGray.50",
        }}
      />
    </Box>
  );
}