Question

我想只加载一次自定义字体（也许在应用加载期间），然后在我的应用内的任何地方使用它。目前，我正在使用async-await方法的每个页面上加载该字体。可以在本机反应中完成吗？谢谢。

Answer 1

您正在使用Expo吗？在这种情况下，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为我们链接这些字体文件：反应本机链接

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

仅反应一次本机加载自定义字体

2 个答案: