javascript - React Native 在 Snack.expo.io 上使用本地字体

Question

如何在 Snack.expo.io 上使用本地字体？

我有一个 ttf 字体，我想将其用作 Snack.expo.io 上的证据，但我不太明白如何做到这一点。

有什么建议吗？

Answer 1

当您创建小吃时，您可以导入文件。您可以看到项目旁边有三个垂直的点，单击即可进入导入菜单。

选择导入文件将带您进入此屏幕，您可以在其中浏览或拖放文件。我更喜欢拖放。

然后您可以将文件拖到您希望它们所在的文件夹中。

然后，要使用自定义字体，您可以按照文档中的指南进行操作。 https://docs.expo.io/versions/latest/guides/using-custom-fonts/

这是一个快速代码示例。

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants, Font } from 'expo';

// You can import from local files


export default class App extends React.Component {
  // <- use the button on the left, three vertical dots to import files

  // set the initial state
  state = {
    fontLoaded: false
  }

  async componentDidMount() {
    // load fonts
    await this.loadFonts();
  }

  loadFonts = async () => {
    // load the font 
    await Font.loadAsync({
      'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
    });
    this.setState({fontLoaded: true})
  }

  render() {
    // use the font in your text components
    // only render the Text component when the font has been loaded.
    return (
      <View style={styles.container}>
        {this.state.fontLoaded ? (<Text style={{ fontFamily: 'open-sans-bold', fontSize: 56 }}>
          Hello, world!
        </Text>) : null}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  }
});

还有一个附带的小吃来展示它的工作原理，请注意我已将字体存储在文件夹 ./assets/fonts/ https://snack.expo.io/@andypandy/custom-font 中。