Реагируйте на использование локального шрифта на snack.expo.io

Question

Как я могу использовать локальный шрифт для snack.expo.io?

У меня есть шрифт ttf, который я хотел бы использовать в качестве доказательства для snack.expo.io, но я не совсем понимаюкак я мог это сделать.

Несколько советов?

Answer 1

Когда вы создаете закуски, вы можете импортировать файлы.У Project есть три вертикальные точки, щелчок которых приводит вас в меню импорта.

Выбор 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