React native React Native/Expo-自定义字体不起作用

我试图在我的项目中使用龙虾字体，因此我：

添加了从google字体下载到/assets/fonts文件夹的.ttf文件

创建：

module.exports={ 项目：{ ios:{}， 安卓：{}， }, 资产：['./资产/字体/']， };

运行命令反应本机链接 -收到的成功资产已成功链接到您的项目

在我的风格对象-fontFamily:“常规龙虾”

---

但是仍然不起作用

如果您使用的是expo，在完成以下步骤后，它应该会起作用：

步骤1： 将Lobster-Regular.ttf文件放入。/assets/font

步骤2： 您的文件应与此类似：

从“React”导入React，{Component} 从“react native”导入{Text，View} 从“expo字体”导入*作为字体； 导出默认类应用程序扩展组件{ 建造师{ 超级的 此.state={ 错误：错误 }; } 异步组件安装{ 等待Font.loadAsync{ “Lobster Regular”：需要“/assets/fonts/Lobster Regular.ttf”， }; this.setState{fontLoaded:true}； } 渲染{ 回来 {this.state.fontload？ 大家好 ：未加载 } } } 如果您使用的是纯react本机，并且链接不起作用，那么您可能应该手动执行

对于android：

在android/app/src/main文件夹结构中，您将创建一个包含fonts文件夹的资产文件夹。在字体文件夹中，您将在此处放置字体文件

---

对于iOS，步骤稍微长一点。如果您正在使用expo，您可以按照此步骤进行操作，在完成此步骤后，它应该可以工作：

步骤1： 将Lobster-Regular.ttf文件放入。/assets/font

步骤2： 您的文件应与此类似：

从“React”导入React，{Component} 从“react native”导入{Text，View} 从“expo字体”导入*作为字体； 导出默认类应用程序扩展组件{ 建造师{ 超级的 此.state={ 错误：错误 }; } 异步组件安装{ 等待Font.loadAsync{ “Lobster Regular”：需要“/assets/fonts/Lobster Regular.ttf”， }; this.setState{fontLoaded:true}； } 渲染{ 回来 {this.state.fontload？ 大家好 ：未加载 } } } 如果您使用的是纯react本机，并且链接不起作用，那么您可能应该手动执行

对于android：

在android/app/src/main文件夹结构中，您将创建一个包含fonts文件夹的资产文件夹。在字体文件夹中，您将在此处放置字体文件

---

对于iOS，步骤稍微长一点。有时，您的字体文件名与应用程序中使用的真实字体名不匹配，您可以遵循此操作

---

有时检查XCode info.plist

，您的字体文件名与应用程序中使用的真实字体名不匹配

---

检查XCode info.plist

链接后是否重新编译了应用程序？字体应在之后可用。链接后是否重新编译应用程序？字体应在之后可用。

import React, { useEffect, useState } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import * as Font from 'expo-font';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default function App() {
  const [loaded, setLoaded] = useState(false);
  const [error, setError] = useState(false);
  const fonts = {
    'test': require('./example.ttf'),
  };
  useEffect(() => {
    (async () => {
      try {
        await Font.loadAsync(fonts);
        setLoaded(true);
      } catch (err) {
        setError(err);
      }

    })();
  }), [fonts];

  if (error) return <View><Text>{error.message}</Text></View>;
  if (!loaded) return null;

  return (
    <View style={styles.container}>
      <Text>normal text</Text>
      <Text style={[styles.paragraph, { fontFamily: 'test' }]}>
        Test text!!!!
      </Text>
      <Card>
        <AssetExample />
      </Card>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});