React Native全局设置默认fontFamily，无需批量修改styled.Text组件

问题背景 #

开发React Native应用时使用styled-components/native的styled.Text组件，现有172处此类组件。当前只能手动为每个组件添加字体样式：

export const FormTitle = styled.Text`
  font-family: 'Nunito-Regular';
  font-weight: normal;
`;

需要实现类似Web端设置body字体的全局默认配置，避免手动逐个修改或全局导入自定义Text组件（多分支开发下合并代码冲突风险高）。

已尝试无效方案：

• react-native-global-font 无效果
• 重写Text.render方法（代码如下）未生效：

let oldRender = Text.render;
Text.render = function (...args) {
    let origin = oldRender.call(this, ...args);
    return React.cloneElement(origin, {
        style: [{  fontFamily: 'Nunito-Regular'}, origin.props.style]
    });
};

可行解决方案 #

方案1：使用styled-components的createGlobalStyle（推荐） #

styled-components/native支持全局样式配置，直接为所有Text组件设置默认字体：

import { createGlobalStyle } from 'styled-components/native';

// 定义全局样式
const GlobalTextStyle = createGlobalStyle`
  text {
    font-family: 'Nunito-Regular';
    font-weight: normal;
  }
`;

// 在根组件App.tsx中渲染全局样式
export default function App() {
  return (
    <>
      <GlobalTextStyle />
      {/* 你的应用根内容 */}
    </>
  );
}

方案2：重写styled.Text基础组件 #

创建自定义的基础Text组件，让所有现有组件继承，通过IDE全局替换减少修改量：

1. 创建全局样式文件src/styles/styled-base.ts：

import styled from 'styled-components/native';

// 定义带默认字体的基础Text
export const BaseText = styled.Text`
  font-family: 'Nunito-Regular';
  font-weight: normal;
`;

// 导出原styled对象，方便其他组件使用
export default styled;

2. 使用IDE全局替换，将项目中所有styled.Text替换为styled(BaseText)，后续新组件直接基于BaseText扩展：

// 替换后示例
export const FormTitle = styled(BaseText)`
  font-size: 20px;
  color: #333;
`;

方案3：修复Text.render重写逻辑 #

原重写方案无效是因为执行时机晚于styled-components的导入，调整执行顺序即可：

// 必须在导入styled-components之前执行重写
import React from 'react';
import { Text } from 'react-native';

const originalRender = Text.render;
Text.render = function render(props: any) {
  const originElement = originalRender.call(this, props);
  return React.cloneElement(originElement, {
    style: [
      { fontFamily: 'Nunito-Regular', fontWeight: 'normal' },
      originElement.props.style,
    ],
  });
};

// 之后再导入styled-components及其他依赖
import styled from 'styled-components/native';
// ...其他导入代码

关键注意事项 #

• 确保字体已正确配置到项目：
  • iOS：在Info.plist中添加Fonts provided by application字段，填入字体文件名（如Nunito-Regular.ttf）
  • Android：将字体文件放入android/app/src/main/assets/fonts目录
• RN 0.60+支持自动链接字体，无需手动执行react-native link

内容的提问来源于stack exchange，提问作者AlainIb