如何在我的 React Native Expo 应用程序中设置 satoshi 字体

Question

我的 React Native Expo 应用程序需要 Satoshi 字体。但是，我不知道如何设置自定义字体。我遵循 youtube 频道的方法。没用。

Answer 1

1. 安装Expo字体包：

   npm i expo-font

2. 下载 Satoshi 字体：

从信誉良好的来源下载 Satoshi 字体，例如 Google Fonts 或 Santoshi Fonts。 将字体文件保存在项目的

assets/fonts

目录中。

3. 创建一个 useFonts 钩子：

   import { useFonts } from 'expo-font';
   
    const useSatoshiFont = () => {
    const [fontsLoaded] = useFonts({
     'Satoshi': require('../assets/fonts/Satoshi.ttf'),
    });
    return fontsLoaded;
   };
   

4. 在组件中使用钩子：

   import { useSatoshiFont } from './useSatoshiFont';
   
    const MyComponent = () => {
    const fontsLoaded = useSatoshiFont();
   
    if (!fontsLoaded) {
    // Show a loading indicator while the fonts are loading
     return <Text>Loading...</Text>;
       }
   
      return <Text style={{ fontFamily: 'Satoshi' }}>This is Satoshi 
       font</Text>;
      };
   

5. 将字体系列添加到应用程序的 app.json 文件中：

   {
     "expo": {
      "fonts": [
       {
       "name": "Satoshi",
        "style": "normal"
       }
      ]
     }
    }
   

• 确保 app.json 文件中的字体文件名和字体系列名称匹配。

• app.json 文件应位于项目的根目录中。

• 进行这些更改后重新构建您的应用程序。

  expo clean
  expo start