NativeWind项目中使用自定义字体指南

前言

在React Native开发中，使用自定义字体是常见的需求。NativeWind作为Tailwind CSS的React Native实现，提供了便捷的方式来管理和使用自定义字体。本文将详细介绍如何在NativeWind项目中正确配置和使用自定义字体。

准备工作

在开始之前，需要确保以下几点：

1. 项目已正确安装NativeWind
2. 已获取所需的字体文件或知道要使用的Google Fonts名称
3. 了解基本的Tailwind配置知识

字体加载方式

NativeWind支持两种主要的字体加载方式：

1. 使用expo-font加载Google Fonts

这是最简便的方式，特别适合使用Google Fonts的情况：

import { useFonts } from 'expo-font';
import { Poppins_400Regular, Poppins_500Medium } from '@expo-google-fonts/poppins';

function App() {
  const [fontsLoaded] = useFonts({
    Poppins_400Regular,
    Poppins_500Medium,
  });

  if (!fontsLoaded) {
    return null; // 或者显示加载指示器
  }

  return <YourApp />;
}

2. 通过app.json配置本地字体文件

对于自定义字体文件，可以在app.json中配置：

{
  "expo": {
    "plugins": [
      [
        "expo-font",
        {
          "fonts": [
            "./assets/fonts/YourFont-Regular.ttf",
            "./assets/fonts/YourFont-Bold.ttf"
          ]
        }
      ]
    ]
  }
}

Tailwind配置

在tailwind.config.js中扩展字体配置：

const { platformSelect } = require('nativewind/theme');

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'custom-regular': platformSelect({
          android: 'YourFont_Regular',
          ios: 'YourFont-Regular',
        }),
        'custom-bold': platformSelect({
          android: 'YourFont_Bold',
          ios: 'YourFont-Bold',
        }),
      },
    },
  },
};

注意要点：

• 字体名称需要使用kebab-case格式（短横线连接）
• 必须使用platformSelect处理Android和iOS平台差异
• Android字体名称通常使用下划线，iOS使用短横线

使用自定义字体

配置完成后，可以在组件中直接使用Tailwind类名：

<Text className="font-custom-regular text-lg">常规字体</Text>
<Text className="font-custom-bold text-lg">加粗字体</Text>

常见问题解决

1. 字体不生效：

   • 检查字体是否已正确加载
   • 确认tailwind配置中的字体名称与加载的名称一致
   • 确保使用了正确的kebab-case类名格式

2. 平台差异问题：

   • Android和iOS对字体名称的解析方式不同
   • 必须使用platformSelect处理平台差异

3. 性能优化：

   • 避免加载过多字体文件
   • 考虑按需加载字体变体

最佳实践

1. 为字体变体设计有意义的别名，如"body", "heading"等，而不是直接使用字体名称
2. 在全局样式中设置默认字体
3. 建立字体使用规范，保持设计一致性

总结

通过NativeWind使用自定义字体既保持了Tailwind的便利性，又能充分利用React Native的字体系统。关键在于正确配置tailwind.config.js并处理好平台差异。遵循本文指南，可以轻松地在项目中实现美观的字体排版。