TypeError: Cannot read property 'loadAsync' of null

Question

我想在 React Native (expo) 项目中导入自定义字体

我安装了 expo-font 和 expo-file-system 并编写了一些加载和使用字体的代码

这是我的代码：

import * as React from 'react';
import { Button} from 'react-native-paper';
import { AppLoading, Font } from 'expo';

export class ButtonSample extends React.Component {
    constructor() {
        super()
        this.state={
            fontLoaded:false
        }
    }

    async componentDidMount() {
        try {
          await Font.loadAsync({
            'Ranchers': require('../assets/fonts/Ranchers-Regular.ttf'),
            'Inter-SemiBoldItalic': 'https://rsms.me/inter/font-files/Inter-SemiBoldItalic.otf?v=3.12',
          });

          this.setState({ fontLoaded: true });
          alert('fonts are loaded');
        } catch (error) {
          alert(error);
        }
    }

    render() {
        return (
            <>
                {this.state.fontLoaded ? ( 
                        <Button style={{marginTop:20, fontFamily: "Ranchers"}} icon="box" mode="contained" onPress={() => alert('Pressed')}>
                            Click me
                        </Button>
                ) : (
                     <AppLoading />
                )}
                
            </>

        );
    }
}

有什么问题吗？ expo-font安装有没有问题？

Answer 1

问题是您是从“expo”（认为已弃用）而不是从“expo-font”导入字体。

就这样：

import * as React from 'react';
import { Button} from 'react-native-paper';
import { AppLoading } from 'expo';
import * as Font from "expo-font"; // <---

export class ButtonSample extends React.Component {
    constructor() {
        super()
        this.state={
            fontLoaded:false
        }
    }

    async componentDidMount() {
        try {
          await Font.loadAsync({
            'Ranchers': require('../assets/fonts/Ranchers-Regular.ttf'),
            'Inter-SemiBoldItalic': 'https://rsms.me/inter/font-files/Inter-SemiBoldItalic.otf?v=3.12',
          });

          this.setState({ fontLoaded: true });
          alert('fonts are loaded');
        } catch (error) {
          alert(error);
        }
    }

    render() {
        return (
            <>
                {this.state.fontLoaded ? ( 
                        <Button style={{marginTop:20, fontFamily: "Ranchers"}} icon="box" mode="contained" onPress={() => alert('Pressed')}>
                            Click me
                        </Button>
                ) : (
                     <AppLoading />
                )}
                
            </>

        );
    }
}

并且会正常工作。此外，我建议您编写自己的启动画面来执行此操作。