react-native - 全局样式表中的 Expo 字体

Question

我正在使用 Expo，需要在我的全局样式表中使用自定义字体。世博documents但这与我的情况无关，因为 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 {
  // ...
}

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

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

重要的是，在呈现其样式使用已加载字体的组件之前，您需要等待 Expo.Font.loadAsync 完成。