0

我正在尝试将 expo 和 nextjs 用于我的 Web 应用程序，并且我已尝试实施文档中列出的步骤以使我能够使用字体和图像，但是我不断收到此错误

错误 - ./assets/fonts/Fontisto.ttf 1:0 模块解析失败：意外字符 ' ' (1:0) 您可能需要适当的加载器来处理此文件类型，目前没有配置加载器来处理此文件。请参阅https://webpack.js.org/concepts#loaders （此二进制文件的源代码省略）

下面是我的 nex.config.js

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

// module.exports = withExpo({
//   projectRoot: __dirname,
// });
//
// module.exports = withExpo(
//   withFonts({
//     projectRoot: __dirname,
//   })
// );
//
// module.exports = withExpo(
//   withImages({
//     projectRoot: __dirname,
//   })
// );

module.exports = withExpo(
  [
    withFonts,
    withImages,
  ],
  { projectRoot: __dirname }
);
4

3 回答 3

0

这就是我使用的有效方法：

const { withExpo } = require('@expo/next-adapter');
const withFonts = require('next-fonts');

module.exports = withExpo(
  withFonts({
    projectRoot: __dirname,
  })
);
于 2021-04-27T16:53:14.643 回答
0

这应该有效。

const { withExpo } = require("@expo/next-adapter");
const withFonts = require("next-fonts");
const withImages = require("next-images");
const withPlugins = require("next-compose-plugins");

const withTM = require("next-transpile-modules")([
  "expo-next-react-navigation",
  // you can add other modules that need traspiling here
]);

module.exports = withPlugins(
  [
    withTM, 
    withFonts, 
    withImages, 
    [
      withExpo, 
      { projectRoot: __dirname }
    ]
  ], 
  {
    // ...
  }
);

参考：这个例子

于 2021-11-18T14:00:36.977 回答
0

1.安装必要的插件

npm install --save next-compose-plugins expo-font

或者

yarn add next-compose-plugins expo-font

2. 设置

next.config.js

const { withExpo } = require('@expo/next-adapter');
const withFonts = require('next-fonts');
const withImages = require('next-optimized-images');
const withPlugins = require("next-compose-plugins");

module.exports = withPlugins([
  withFonts,
  withImages,
  [
    withExpo,
    { projectRoot: __dirname }
  ]
]);

3.类型声明

创建以下文件以便能够import为您的字体使用该语句。

declarations.d.ts

将以下内容粘贴到文件中。

declare module '*.ttf' {}

4.加载字体

我创建了以下自定义挂钩来异步加载资源。

useResources.ts

import * as Font from 'expo-font';
import { useEffect, useState } from 'react';

import YOUR_FONT_FILE_HERE from '/path/to/fonts/FONT_NAME.ttf';

export const useResources = () => {
  const [isFontReady, setIsFontReady] = useState(false);

  const loadFontAsync = async () => {
    try {
      await Font.loadAsync({
        HindRegular: {
          uri: YOUR_FONT_FILE_HERE as any,
          display: Font.FontDisplay.SWAP,
        }
      });
    } catch (error) {
      console.log('Font Load Error:', error)
    } finally {
      setIsFontReady(true);
    }
  }

  useEffect(() => {
    loadFontAsync();
  }, []);

  return {
    isFontReady
  }
};

5. 用法

在这里，我们在尝试使用资源之前确保资源可用。

export default function App() {
  const { isFontReady } = useResources();

  if (!isFontReady) {
    return (
      <View>
        <Text>Resources are loading...</Text>
      </View>
    )
  }
  
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Welcome to Expo + Next.js </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 16,
    fontFamily: 'YOUR_FONT_NAME_HERE' <----- HERE
  },
});

供进一步阅读的资源。

已关闭问题回复（大开眼界）

世博字体

Expo-NextJS

于 2022-02-01T15:19:55.783 回答