react-native - React Native 仅加载一次自定义字体

Question

我只想加载自定义字体一次(可能在应用程序加载期间)并在应用程序内的任何位置使用它。目前，我正在使用 async-await 方法在每个使用它的页面上加载字体。这可以在 native react 中完成吗？ 谢谢。

Answer 1

您在使用世博会吗？在这种情况下，在 App.js(或应用程序的第一个文件加载)中应该很容易

您可以看到下面的示例:

import { Font } from 'expo'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      fontLoaded: false
    }
  }

  async componentDidMount() {
    try {
      await Font.loadAsync({
        MyFontName: require('./path/my-font.otf'),
        MyFontName2: require('./path/my-font-2.otf')
      })
      this.setState({ fontLoaded: true })
    } catch (error) {
      console.log(error)
      return
    }
  }

  render() {
    const { fontLoaded } = this.state

    if (fontLoaded) {
      return (
        <View>
          <Text>Fonts are loaded !</Text>
        </View>
      )
    }

    return (
      <View>
        <Text>Loading fonts ...</Text>
      </View>
    )
  }
}

export default App

之后，您可以在应用的所有样式中使用该字体的名称。

MyCustomStyle: {
  fontFamily: 'MyFontName'
}

希望可以帮到你