3

我正在使用 Expo 并且需要在我的全局样式表中使用自定义字体。Expo记录了这一点，但是在我的情况下它并不相关，因为 componentDidMount() 只在一个类中执行：

class App extends React.Component {
  componentDidMount() {
    Font.loadAsync({
      'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
    });
  }

  // ...
}

我的全局样式表如下所示：

const React = require('react-native');

import {
  Dimensions,
  StatusBar,
} from 'react-native';

const { StyleSheet } = React;

export default {
  // ...
}
4

3 回答 3

1

Expo 中的字体加载是“惰性的”，因为您可以创建一个 StyleSheet 对象，该对象在加载之前引用字体。例如，此代码是有效的：

async function exampleAsync() {
  let stylesheet = StyleSheet.create({
    fancyText: {
      ...Expo.Font.style('open-sans-bold'),
    },
  });

  await Expo.Font.loadAsync({
    'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
  });
}

所以你不一定需要Expo.Font.loadAsync在inside调用，在字体加载之前componentDidMount调用StyleSheet.createand就可以了。Expo.Font.style

Expo.Font.loadAsync重要的是在渲染样式使用加载字体的组件之前等待完成。

于 2017-03-07T20:22:23.610 回答
0

您可以做的只是在您的根/顶部组件中添加一个状态标志，检查字体异步是否已经完成。

然后在您的渲染方法中添加一个条件，以确保您的子组件仅在字体成功加载后才会被渲染。请看例子

     export default class App extends React.Component {
      state = {
        fontLoaded: false,
      }

      componentDidMount() {
        this.loadAssetsAsync();
      }

      async loadAssetsAsync() {
        await Expo.Font.loadAsync({
         'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
        });;

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

      render() {
        if (!this.state.fontLoaded) {
          return <AppLoading />;  // render some progress indicator
        }

        return (
          <Navigator />    //render your child components tree
        );
      }
    }
于 2017-08-31T17:46:35.880 回答
0

我最终只是在导航文件中加载字体，然后能够在我的全局样式表和整个应用程序中访问这些字体。

于 2017-02-13T18:55:54.673 回答