【问题标题】：Loading custom fonts in React Native is giving error在 React Native 中加载自定义字体会出错
【发布时间】：2020-06-18 22:02:44
【问题描述】：

fontFamily "pro" 不是系统字体，尚未通过 Font.loadAsync 加载。

如果您打算使用系统字体，请确保您输入的名称正确且受您的设备操作系统支持。

- 如果这是自定义字体，请务必使用 Font.loadAsync 加载它。

但如果我解除错误，我会看到字体已加载。

这是我的代码：

    export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {loading: true};
  }

  async componentDidMount() {
    await Font.loadAsync({
      pro: require('./assets/fonts/MavenPro-Regular.ttf'),
      medium: require('./assets/fonts/MavenPro-Medium.ttf'),
    }).then(() => {
      this.setState({loading: false});
    });
  }

  render() {
    return (
      <Provider store={store}>
        <NavigationContainer>
          {
            <Drawer.Navigator
              drawerType={'slide'}
              drawerContent={(props) => <DrawerContent {...props} />}>
              <Drawer.Screen
                name="Home"
                component={HomeStackScreen}
                options={{
                  swipeEnabled: false,
                }}
              />
            </Drawer.Navigator>
          }
        </NavigationContainer>
      </Provider>
    );
  }
}

【问题讨论】：

标签： react-native fonts expo

【解决方案1】：

您不会根据加载状态延迟呈现应用程序，因此您是在字体加载之前渲染应用程序，因此会出现错误。

注意this example 中的AppLoading 组件是在加载字体时呈现的，您可以根据需要使用它，或者您想要显示的任何其他内容。

另外，与您的问题无关，但仅供参考，如果您使用的是await，则无需使用then()

await doSomething();
this.setState({ done: true });

【讨论】：