React Native i18n切换语言时useState状态重置致字体切换失效

现有实现有4个核心问题导致字体切换失效：

• i18n.on事件监听直接写在组件渲染周期内，没有做绑定清理、也没有放入副作用钩子，每次组件重渲染都会重复绑定监听，极易触发状态异常更新和内存泄漏
• 状态newFont初始值为undefined，且判断逻辑硬编码为true时才加载阿拉伯字体，既没有和当前实际语言绑定，切回英文时也不会把状态重置为对应值，应用刷新状态重置后会直接 fallback 到英文字体逻辑，完全不读取i18n初始化的语言配置
• setCustomText、setCustomTextInput这类全局配置直接写在渲染函数里，每次组件重渲染都会重复执行，很容易和状态更新形成死循环
• 语言切换回调里硬编码setNewFont(true)，不管切换到什么语言都把状态设为true，切回英文时字体完全无法回退

不要用和语言无关的布尔值控制字体，直接绑定i18n的当前语言值做判断，所有全局配置修改、事件绑定都放到useEffect副作用里执行，同时做好事件监听的清理：

import { useEffect, useState } from 'react';
// 按你项目里i18n配置的阿拉伯语编码调整这个列表
const ARABIC_LANGS = ['ar', 'ar-SA', 'ar-AE'];

const App = ({navigation}) => {
  // 初始化时直接读取i18n当前语言作为初始状态，避免首屏字体闪烁
  const [currentLang, setCurrentLang] = useState(i18n.language);

  useEffect(() => {
    const onLangChange = (lang) => {
      setCurrentLang(lang);
    };
    // 绑定语言变化监听
    i18n.on('languageChanged', onLangChange);
    // 组件卸载时移除监听，防止重复绑定
    return () => i18n.off('languageChanged', onLangChange);
  }, []);

  useEffect(() => {
    const isArabic = ARABIC_LANGS.includes(currentLang);
    const globalFontStyle = {
      fontFamily: isArabic ? Fonts.GLOBAL_APP_ARABIC_FONT : Fonts.GLOBAL_APP_FONT
    };
    // 仅在语言变化时更新全局文本组件配置
    setCustomText({ style: globalFontStyle });
    setCustomTextInput({ style: globalFontStyle });
  }, [currentLang]);

  // 原有App的渲染逻辑保持不变
  return (
    // 根组件/路由配置内容
  )
}

• 如果项目用了react-i18next，优先用useTranslation()钩子返回的i18n实例，不要直接引用全局i18n对象，避免多实例上下文不一致
• 如果做了语言偏好本地持久化，初始化状态时优先读取本地存储的语言值，避免冷启动短暂加载错误字体
• 阿拉伯语为RTL布局，切换语言时记得同步修改I18nManager的布局方向，不要只切换字体

内容的提问来源于stack exchange，提问作者Jason Byron Beedle