React Native中如何添加自定义字体

在React Native开发中，使用自定义字体可以为应用增添独特的视觉效果和品牌一致性。虽然React Native默认支持一些系统字体，但在实际项目中，我们通常需要引入自定义字体以满足设计需求。本文将详细介绍如何在React Native中添加和使用自定义字体。

1. 准备工作

在开始之前，确保你已经准备好以下内容：

• 自定义字体文件（通常是.ttf或.otf格式）。
• 一个已经创建好的React Native项目。

2. 添加字体文件到项目

首先，将你的字体文件复制到项目的某个目录中。通常，我们会将这些文件放在assets/fonts目录下。如果该目录不存在，可以手动创建。

例如，假设我们有两个字体文件：MyCustomFont-Regular.ttf和MyCustomFont-Bold.ttf，我们可以将它们放在assets/fonts目录下。

my-react-native-app/
├── assets/
│   └── fonts/
│       ├── MyCustomFont-Regular.ttf
│       └── MyCustomFont-Bold.ttf
├── ...

3. 配置react-native.config.js

为了确保React Native能够正确识别和使用这些字体文件，我们需要在项目根目录下创建一个react-native.config.js文件（如果尚未存在），并添加以下配置：

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['./assets/fonts/'], // 指向字体文件所在的目录
};

这个配置告诉React Native在构建项目时，将assets/fonts目录下的字体文件链接到iOS和Android项目中。

4. 链接字体文件

在React Native 0.60及以上版本中，字体文件的链接是自动完成的。你只需要运行以下命令来确保字体文件被正确链接：

npx react-native link

这个命令会自动将字体文件链接到iOS和Android项目中。如果你使用的是较旧的React Native版本，可能需要手动执行链接操作。

5. 在iOS项目中验证字体链接

对于iOS项目，你可以在Xcode中打开Info.plist文件，确保字体文件已经被正确添加到Fonts provided by application数组中。如果没有，你可以手动添加：

<key>UIAppFonts</key>
<array>
  <string>MyCustomFont-Regular.ttf</string>
  <string>MyCustomFont-Bold.ttf</string>
</array>

6. 在Android项目中验证字体链接

对于Android项目，React Native会自动将字体文件放置在android/app/src/main/assets/fonts目录下。你可以检查该目录，确保字体文件已经存在。

7. 在React Native中使用自定义字体

一旦字体文件被正确链接，你就可以在React Native组件中使用这些字体了。使用fontFamily样式属性来指定自定义字体。

import React from 'react';
import { Text, StyleSheet, View } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.customFont}>Hello, Custom Font!</Text>
      <Text style={styles.boldFont}>This is Bold Text</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  customFont: {
    fontFamily: 'MyCustomFont-Regular',
    fontSize: 24,
  },
  boldFont: {
    fontFamily: 'MyCustomFont-Bold',
    fontSize: 24,
  },
});

export default App;

在上面的代码中，我们使用了MyCustomFont-Regular和MyCustomFont-Bold作为fontFamily的值。这些值应该与字体文件的名称（不包括扩展名）一致。

8. 处理字体加载问题

在某些情况下，字体可能不会立即加载，导致应用在启动时显示默认字体。为了解决这个问题，你可以使用expo-font库来确保字体在应用启动时已经加载完成。

首先，安装expo-font：

npm install expo-font

然后，在应用的入口文件（通常是App.js）中，使用Font.loadAsync来加载字体：

import React, { useState, useEffect } from 'react';
import { Text, View, ActivityIndicator } from 'react-native';
import * as Font from 'expo-font';

const App = () => {
  const [fontsLoaded, setFontsLoaded] = useState(false);

  useEffect(() => {
    const loadFonts = async () => {
      await Font.loadAsync({
        'MyCustomFont-Regular': require('./assets/fonts/MyCustomFont-Regular.ttf'),
        'MyCustomFont-Bold': require('./assets/fonts/MyCustomFont-Bold.ttf'),
      });
      setFontsLoaded(true);
    };

    loadFonts();
  }, []);

  if (!fontsLoaded) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontFamily: 'MyCustomFont-Regular', fontSize: 24 }}>Hello, Custom Font!</Text>
      <Text style={{ fontFamily: 'MyCustomFont-Bold', fontSize: 24 }}>This is Bold Text</Text>
    </View>
  );
};

export default App;

在这个例子中，我们使用ActivityIndicator在字体加载完成之前显示一个加载指示器。

9. 总结

通过以上步骤，你可以在React Native项目中成功添加并使用自定义字体。这不仅能够提升应用的外观，还能增强品牌的一致性。记住，确保字体文件的名称与fontFamily的值一致，并在必要时使用expo-font来确保字体在应用启动时已经加载完成。

希望这篇文章对你有所帮助，祝你在React Native开发中取得成功！