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

Question

我只想加载一次自定义字体（可能在应用程序加载期间）并在我的应用程序内的任何地方使用它。目前我正在使用异步等待方法在每个使用它的页面上加载字体。这可以在本机反应中完成吗？谢谢。

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'
}

希望能帮到你

Answer 2

1) 将所有你想要的字体文件添加到 React Native 项目根目录下的“assets/fonts”文件夹中 2) 接下来，我们需要告诉 React Native 我们的自定义字体所在的位置。我们通过将 rnpm 添加到 package.json 来提供字体文件的路径：

"rnpm": {
  "assets": [
    "./assets/fonts/"
   ]
 },

3) 然后我们告诉 React Native 给我们 link 那些字体文件：本机反应 link

4) 这应该在 iOS 的 Info.plist 文件中添加字体引用，并在 Android 上将字体文件复制到 android/app/src/main /assets/fonts。您可以通过从 iOS 文件夹中打开 Info.plist 并查找 UIAppFonts 密钥来验证这一点，您应该会看到类似于以下内容的内容：

<key>UIAppFonts</key>
 <array>
  <string>SF-Pro-Display.ttf</string>
 </array>

5) 在 Android 上，如果您查看文件路径“android/app/src/main/assets/fonts/”，您应该会看到您的字体已被复制

6) 嵌入和引用字体后，将它们添加到 React Native 样式中很简单。只需使用您的字体名称添加 fontFamily 属性：

const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",
      backgroundColor: "#FFFFFF"
    },
    heading: {
       fontFamily: "SF-Pro-Display-Bold",
       fontSize: 20,
       letterSpacing: 0,
       color: "#000000",
  },
    inputText: {
       fontFamily: "SF-Pro-Display-Medium",
       fontSize: 16,
       letterSpacing: 0,
       color: "#000000",
  },
 });

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

React Native load custom font only once

fonts

react-native