在snack.expo.io上使用本地字体

创建零食时,可以导入文件。你可以看到旁边 项目 有三个垂直点,单击它可以进入导入菜单。

Import files 将带您进入此屏幕,您可以在其中浏览或拖放文件。我喜欢拖拽。

然后,您可以将这些文件拖到您希望它们位于的文件夹中。

然后要使用自定义字体,可以按照文档中的指南进行操作。 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