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

【问题标题】：React Native / Expo - Custom font not workingReact Native / Expo - 自定义字体不起作用
【发布时间】：2020-04-22 00:06:51
【问题描述】：

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

将从谷歌字体下载的 .ttf 文件添加到 /assets/fonts 文件夹中
创建react-native.config.js:

module.exports = { 项目： { IOS：{}，安卓： {}， }, 资产：['./assets/fonts/']， };
运行命令 react-native 链接 -- 收到“成功资产已成功链接到您的项目”
在我的样式对象 - fontFamily: 'Lobster-Regular'

但还是不行

【问题讨论】：

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

标签： react-native expo

【解决方案1】：

有时，您的字体文件名与应用程序中使用的真实字体名称不匹配 检查XCodeinfo.plist

【讨论】：

【解决方案2】：

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

第 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，步骤有点长，你可以按照这个blog

【讨论】：

【解决方案3】：

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',
  },
});

【讨论】：