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

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

我有一个ttf字体，我想用它作为snack.expo.io上的证据，但我不太明白我该怎么做

---

一些建议？

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

选择

导入文件

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

然后，您可以将文件拖动到您希望它们位于的文件夹中

然后，要使用自定义字体，可以按照文档中的指南进行操作。

下面是一个快速代码示例

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,
  }
});

import*as React from'React'；
从“react native”导入{Text，View，StyleSheet}；
从“expo”导入{Constants，Font}；
//可以从本地文件导入
导出默认类App扩展React.Component{
//  {
//加载字体
等待Font.loadAsync({
“open sans bold”：需要（“./assets/font/OpenSans bold.ttf”），
});
this.setState（{fontLoaded:true}）
}
render（）{
//在文本组件中使用字体
//仅在加载字体后呈现文本组件。
返回(
{this.state.fontload(
你好，世界！
)：null}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
paddingTop:Constants.statusBarHeight，
背景颜色：“#ecf0f1”，
填充：8，
}
});

---

还有一个随附的小吃显示它工作，请注意，我已将字体存储在文件夹

/assets/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,
  }
});

import*as React from'React'；
从“react native”导入{Text，View，StyleSheet}；
从“expo”导入{Constants，Font}；
//可以从本地文件导入
导出默认类App扩展React.Component{
//  {
//加载字体
等待Font.loadAsync({
“open sans bold”：需要（“./assets/font/OpenSans bold.ttf”），
});
this.setState（{fontLoaded:true}）
}
render（）{
//在文本组件中使用字体
//仅在加载字体后呈现文本组件。
返回(
{this.state.fontload(
你好，世界！
)：null}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
paddingTop:Constants.statusBarHeight，
背景颜色：“#ecf0f1”，
填充：8，
}
});

---

还有一个附带的小吃来展示它的工作原理，注意我已经将我的字体存储在文件夹

/assets/fonts/

谢谢你的回答，我试过你说的方式：但是它似乎不太好用，尤其是Android，字体没有立即加载，我还没有完全加载。还有别的办法吗？例如，不使用：从“expo”导入{Font}？据我所知，这是在Expo中加载外部字体的唯一方法。如果未立即加载字体，则可以使用

状态

控制

文本

组件的呈现。我已经更新了零食和代码示例，使用Expo建议的

state

方法。我按照你说的做了，但是在android上我的示例似乎不起作用？你自己试试看。链接：因为我需要一个模块，所以我不会使用“expo”的字体，因为它是一个很重的模块。如果我想做同样的事情，但如果没有它，我们会在没有世博会的情况下实施react native项目吗？我说的是snack.expo.io，因为我使用它进行在线测试，无需创建项目，而且很容易与他人共享。Android上的版本不是我自己加载的。我认为您在Android上的字体可能有问题。它可能不兼容。谢谢你的回答，我试过你说的方式：但它似乎不太好用，尤其是Android，字体没有立即加载，我还没有完全加载。还有别的办法吗？例如，不使用：从“expo”导入{Font}？据我所知，这是在Expo中加载外部字体的唯一方法。如果未立即加载字体，则可以使用

状态

控制

文本

组件的呈现。我已经更新了零食和代码示例，使用Expo建议的

state

方法。我按照你说的做了，但是在android上我的示例似乎不起作用？你自己试试看。链接：因为我需要一个模块，所以我不会使用“expo”的字体，因为它是一个很重的模块。如果我想做同样的事情，但如果没有它，我们会在没有世博会的情况下实施react native项目吗？我说的是snack.expo.io，因为我使用它进行在线测试，无需创建项目，而且很容易与他人共享。Android上的版本不是我自己加载的。我认为您在Android上的字体可能有问题。它可能不兼容。