React Native中如何导入可变字体文件的全部字重与样式

安全阿岳

2026-7-1

解决Expo中可变字体的多字重调用问题

你已经正确导入了可变字体文件，不需要逐个导入静态字体文件，只需通过fontWeight属性指定具体数值，就能调用可变字体包含的所有字重。

具体操作方法：

保留你当前的字体导入代码（已正确加载可变字体文件）
在Text组件的样式中，通过fontWeight设置对应字重的数值（需匹配所用可变字体支持的字重范围，比如Quicksand可变字体的字重范围是300-700）

修改后的代码示例：

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.baseText, {fontWeight: '300'}]}>Quicksand Light (300)</Text>
      <Text style={[styles.baseText, {fontWeight: '400'}]}>Quicksand Regular (400)</Text>
      <Text style={[styles.baseText, {fontWeight: '600'}]}>Quicksand SemiBold (600)</Text>
      <Text style={[styles.baseText, {fontWeight: '700'}]}>Quicksand Bold (700)</Text>
    </View>
  );
}

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