世博字体加载不正确

我正在使用expo fonts来加载字体,我突然遇到了一个新的错误。”你开始加载字体,但在它加载完成前就使用了它” 我不知道问题从何而来。我尝试在应用程序中加载字体。

import * as Font from "expo-font";
export default class App extends React.Component {
  async componentDidMount() {
    await Font.loadAsync({
      "open-sans-bold": require("./assets/Fonts/OpenSans-Bold.ttf")
    });
  }



  render() {
    return (
      <Provider store={store}>

          <View style={styles.container}>
            <StatusBar barStyle="dark-content" />
            <AppContainer />
          </View>

      </Provider>
    );
  }
}

但是,这个错误依然存在

解决方案:

出现这个错误是因为你在加载字体之前渲染了你的应用程序。你需要渲染另一个 <View> 在它结束之前。你可以用它来修改你的代码。

import React from 'react-native';
import { Text, StyleSheet, View, ActivityIndicator } from 'react-native';

import * as Font from 'expo-font';
export default class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            fontLoaded: false   
        };
    }

    async componentDidMount() {
        await Font.loadAsync({
            'open-sans-bold': require('./assets/Fonts/OpenSans-Bold.ttf')
        }).then(() => {
            // When the font is loaded you can rendered your app
            this.setState({
                fontLoaded: true
            });
        });
    }

    render() {
        const { fontLoaded } = this.state;

        // When your font is not loaded you display a Loading Component
        if (!fontLoaded) {
            return (
                <View style={styles.container}>
                    <ActivityIndicator size="large" color="#0000ff" />;
                </View>
            );
        } else {
            return (
                <Provider store={store}>
                    <View style={styles.container}>
                        <StatusBar barStyle="dark-content" />
                        <AppContainer />
                    </View>
                </Provider>
            );
        }
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignIems: 'center'
    }
});

给TA打赏
共{{data.count}}人
人已打赏
未分类

检测 Azure 服务总线队列中相同的未处理消息

2022-9-8 9:54:17

未分类

滚动的进度条

2022-9-8 9:54:19

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索