反应本机/世博-自定义字体不工作

Question

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

1. 将从Google字体下载的.ttf文件添加到/assets/fonts文件夹
2. 创建react-native.config.js： module.exports ={ project：{ ios：{}，android：{}，}，资产：'./assets/fonts/'，}；
3. 运行命令react本机链接-接收到的“成功资产已成功链接到您的项目”
4. 在我的风格对象- fontFamily：‘龙虾-普通’

但仍然不起作用

Answer 1

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

步骤1:将Lobster-Regular.ttf文件放在./assets/字体中

步骤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本机，并且链接不起作用，也许您应该手动进行。

对于android：

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

对于iOS，步骤要长一点，您可以遵循这个博客

Answer 2

有时，您的字体文件名与应用程序中使用的实际字体名称不匹配，请检查XCode info.plist。

​

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