如何在 React Native 中添加自定义字体而不在我之前编写的代码中产生任何错误？

Question

我正在使用 expo-cli，谁能帮我在 Expo Managed React Native 项目中使用自定义字体。

Image Link

Answer 1

安装expo-font

expo install expo-font

然后安装expo-app-loading

expo install expo-app-loading

在您的 App.js 所在的位置创建一个名为 hooks 的文件夹。

在 hooks 文件夹中创建一个名为 useFonts.js 的文件并粘贴此代码

useFonts.js

import * as Font from 'expo-font';

const useFonts = async () => {
  await Font.loadAsync({
    Fontello: require('../assets/fonts/fontello.ttf'),
    // Place your custom fonts here and make sure that their location is set properly
  });
};

export default useFonts;

然后在您的 App.js 中粘贴此代码

import React, { useState } from 'react';
import AppLoading from 'expo-app-loading';

import useFonts from './hooks/useFonts';

export default function App() {
  const [IsReady, setIsReady] = useState(false);

  const LoadFonts = async () => {
    await useFonts(); 
  };

  if (!IsReady) {
    return (
      <AppLoading
        startAsync={LoadFonts}
        onFinish={() => setIsReady(true)}
        onError={(error) => console.log(error)}
      />
    );
  }

   return (
     <View>
         // Your App Content here
     </View
   );
}

Working Example

如何在 React Native 中添加自定义字体而不在我之前编写的代码中产生任何错误？

How can I add custom font in react native without generating any error in my previous written code?

react-native

expo

custom-font