React native在点心.expo.io上使用本地字体

Question

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

我有一个ttf字体，我想以此作为在Snake.expo.io上的证据，但我不太了解如何做到这一点。

一些建议？

Answer 1

创建小吃时，可以导入文件。您可以在项目旁边看到三个垂直点，单击可将您带到导入菜单。

选择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

中