时间戳

首页 > 解决方案 > React Native / Expo - 自定义字体不起作用

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

问题描述

我正在尝试在我的项目中使用 Lobster 字体，所以我：

  1. 将从谷歌字体下载的 .ttf 文件添加到 /assets/fonts 文件夹

  2. 创建react-native.config.js：

    module.exports = { project: { ios: {}, android: {}, }, assets: ['./assets/fonts/'], };

  3. 运行命令 react-native link -- 收到“成功资产已成功链接到您的项目”

  4. 在我的风格对象 - fontFamily: 'Lobster-Regular'

但仍然无法正常工作

标签： react-nativeexpo

解决方案

如果您使用的是世博会，在此步骤之后它应该可以工作：

第 1 步：将 Lobster-Regular.ttf 文件放入 ./assets/fonts

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

import React, { Component } from 'react'
import { Text, View} from 'react-native'
import * as Font from 'expo-font';

export default class App extends Component {

constructor(){
    super();
    this.state = {
        fontLoaded: false
    };
}

async componentDidMount(){
   await Font.loadAsync({
        'Lobster-Regular': require('./assets/fonts/Lobster-Regular.ttf'),
    });

    this.setState({ fontLoaded: true});
}

    render() {
        return (
            <View>
                {this.state.fontLoaded ? 
                <Text style={{fontFamily: 'Lobster-Regular'}}>hello everyone</Text>
                : <Text>not loaded</Text>
                }
            </View>
        )
    }
}

如果您使用的是裸 react-native 并且链接不起作用，那么您应该手动进行。

对于安卓：

在您的 android/app/src/main 文件夹结构中，您将创建一个assets文件夹，其中包含该fonts文件夹。在字体文件夹中，您将把字体文件放在这里。

对于 iOS，步骤有点长，您可以关注此博客

推荐阅读