React Native 自定义字体

摘要：在本教程中，您将学习如何将自定义字体加载到 React Native 应用程序中。

设置包

步骤 1. 打开您的终端并导航到您的 React Native 目录

步骤 2. 运行以下命令以安装 expo-font、@expo-google-fonts/inter 和 expo-splash-screen 包

npx expo install expo-font @expo-google-fonts/inter expo-splash-screen Code language: JavaScript (javascript)

以下是这些包

• expo-font – 允许您加载自定义字体。
• expo-splash-screen – 管理原生启动屏幕的可见性。
• @expo-google-fonts/inter – 将 Inter 字体加载到您的应用程序中。

使用自定义字体

修改 App.js 以使用 Inter 字体

import { useEffect } from 'react';
import { StyleSheet, SafeAreaView, Text } from 'react-native';
import { Inter_700Bold, Inter_400Regular, Inter_300Light, useFonts } from '@expo-google-fonts/inter';
import * as SplashScreen from 'expo-splash-screen';

SplashScreen.preventAutoHideAsync();

export default function App() {

  const [fontLoaded, error] = useFonts({
    Inter_400Regular,
    Inter_700Bold,
    Inter_300Light
  });

  useEffect(() => {
    if (fontLoaded || error) {
      SplashScreen.hideAsync();
    }
  }, [fontLoaded, error]);


  if (!fontLoaded && !error) {
    return null;
  }


  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.text}>Hello, World!</Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontFamily: 'Inter_400Regular',
    fontSize: 40,
  }
});Code language: JavaScript (javascript)

工作原理。

首先，显示启动屏幕

SplashScreen.preventAutoHideAsync();Code language: JavaScript (javascript)

其次，使用 useFonts 钩子异步加载 Inter 字体系列

const [fontLoaded, error] = useFonts({
  Inter_400Regular,
  Inter_700Bold,
  Inter_300Light
});Code language: JavaScript (javascript)

useFonts 钩子返回一个包含两个值的数组

• fontLoaded：如果字体已加载完毕，则为 true，否则为 false。
• error：如果在加载字体时遇到错误，则为 true，否则为 null。

第三，如果字体已加载或发生错误，则隐藏启动屏幕

useEffect(() => {
  if (fontLoaded || error) {
    SplashScreen.hideAsync();
  }
}, [fontLoaded, error]);Code language: JavaScript (javascript)

第四，定义一个使用 Inter_300Light 字体的 text 样式

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontFamily: 'Inter_300Light',
    fontSize: 40,
  }
});Code language: JavaScript (javascript)

最后，将 text 样式用于 Text 组件

return (
    <SafeAreaView style={styles.container}>
        <Text style={styles.text}>Hello, World!</Text>
    </SafeAreaView>
);Code language: JavaScript (javascript)

总结

• 使用 useFonts 钩子为您的应用程序加载自定义字体。