如何在 React Native 中导入可变字体文件中的所有字体类型

Question

我是 React Native 的初学者，一直在玩用 expo 创建的项目。我正在使用 expo-font 库和 useFonts 挂钩来导入 ttf 可变字体。我遇到的问题是它只导入一种类型的字体，而不是全部。我通读了 expo 的文档，但它没有提到可变字体文件。 这就是我导入字体的方式：

import { StyleSheet, Text, View } from 'react-native';
import {useFonts} from "expo-font";
import * as SplashScreen from 'expo-splash-screen';
import { useCallback } from 'react';

SplashScreen.preventAutoHideAsync();

export default function App() {

  const [fontsLoaded, fontError] = useFonts({
    "Quicksand" : require('./assets/fonts/Quicksand/Quicksand-VariableFont_wght.ttf')
  });

  const onLayoutRootView = useCallback(async () => {
    if (fontsLoaded || fontError) {
      await SplashScreen.hideAsync();
    }
  }, [fontsLoaded, fontError]);

  if (!fontsLoaded && !fontError) {
    return null;
  }

  return (
    <View style={styles.container} onLayout={onLayoutRootView}>
      <Text style={styles.text}>Open up App.js to start working on your app!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontFamily: "Quicksand",
    fontSize: 50,
  }
});

有没有一种方法可以从可变字体文件中导入所有字体类型和粗细，而不必一一导入静态字体？ 预先感谢！

Answer 1

要使用 expo-font 库从 TTF 可变字体文件导入所有字体，您可以按照以下步骤操作： 在应用程序的资产目录中创建一个字体文件夹。

1º - 将 TTF 可变字体文件提取到字体文件夹。

2º - 使用 npm install expo-font 命令安装 expo-font 库。

3º - 将变量 fonts 导入到 App.js 文件中，如下所示：

import { StyleSheet, Text, View } from 'react-native';
import { useFonts } from "expo-font";
import * as SplashScreen from 'expo-splash-screen';
import { useCallback } from 'react';

SplashScreen.preventAutoHideAsync();

export default function App() {

  const [fontsLoaded, fontError] = useFonts({
    "Quicksand": require('./assets/fonts/Quicksand/Quicksand-VariableFont_wght.ttf')
  });

  const onLayoutRootView = useCallback(async () => {
    if (fontsLoaded || fontError) {
      await SplashScreen.hideAsync();
    }
  }, [fontsLoaded, fontError]);

  if (!fontsLoaded && !fontError) {
    return null;
  }

  return (
    <View style={styles.container} onLayout={onLayoutRootView}>
      <Text style={styles.text}>Open up App.js to start working on your app!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontFamily: "Quicksand",
    fontSize: 50,
  }
});

在此示例中，导入 Quicksand 可变字体并将其应用到文本。要应用其他可变字体，只需将其他键添加到具有相应可变字体文件路径的 useFonts 对象即可。 请记住，expo-font库支持可变字体，但您可能需要额外的配置才能在应用程序中正确应用它们。