React Native：如何在非组件函数中调用Context以简化翻译函数的使用

这确实是个挺烦人的重复工作——每次用翻译都要手动从Context拿语言再传进去，我给你几个实用的方案，帮你实现t('tenSeconds')这种清爽的调用方式：

方案一：自定义翻译Hook（最推荐） #

把Context的获取和翻译逻辑封装成一个自定义Hook，完全符合React的Hook规则，而且用起来特别顺手：

import { useContext } from 'react';
import { LanguageContext } from '../contexts/LanguageContext';
import strings from '../assets/values/strings.json';

export const useTranslation = () => {
  const [language] = useContext(LanguageContext);
  
  // 封装翻译函数，自动获取当前语言
  const t = (translationKey) => {
    // 加个 fallback，避免找不到翻译键时显示空白或报错
    return strings[language]?.[translationKey] || translationKey;
  };

  return t;
};

组件中使用： #

import { useTranslation } from '../path/to/useTranslation'; // 替换成你的文件路径

const TestComponent = () => {
  const t = useTranslation();
  return <Text>{t('tenSeconds')}</Text>;
};

这个方案的好处是：

• 完全遵循React Hook规范，语言变化时组件会自动重新渲染更新翻译
• 代码简洁，组件里只需要调用Hook拿到t函数就行，不用再管Context的细节
• 自带fallback，避免因翻译键缺失导致的错误

方案二：高阶组件（HOC） #

如果你的项目里还有类组件，或者习惯用HOC的方式，这个方案也适用：

import React from 'react';
import { LanguageContext } from '../contexts/LanguageContext';
import strings from '../assets/values/strings.json';

const withTranslation = (Component) => {
  return (props) => {
    const [language] = useContext(LanguageContext);
    
    const t = (translationKey) => {
      return strings[language]?.[translationKey] || translationKey;
    };

    return <Component {...props} t={t} />;
  };
};

组件中使用： #

// 组件本身接收t作为props
const TestComponent = ({ t }) => {
  return <Text>{t('tenSeconds')}</Text>;
};

// 用HOC包装组件
export default withTranslation(TestComponent);

方案三：翻译服务（支持非组件环境） #

如果需要在非组件的工具函数里也能使用翻译函数，可以用这种订阅式的服务方案，稍微复杂一点，但灵活性更高：

import React, { useContext, useEffect } from 'react';
import { LanguageContext } from '../contexts/LanguageContext';
import strings from '../assets/values/strings.json';

// 存储当前语言，默认用英文
let currentLanguage = 'en';
// 订阅者列表，语言变化时通知所有订阅者
let subscribers = [];

// 订阅语言变化的方法
const subscribeToLanguageChange = (callback) => {
  subscribers.push(callback);
  // 返回取消订阅的函数
  return () => {
    subscribers = subscribers.filter(sub => sub !== callback);
  };
};

// 更新当前语言并通知所有订阅者
const updateCurrentLanguage = (lang) => {
  currentLanguage = lang;
  subscribers.forEach(callback => callback(lang));
};

// 核心翻译函数
export const t = (translationKey) => {
  return strings[currentLanguage]?.[translationKey] || translationKey;
};

// 供组件使用的Hook，确保组件能响应语言变化
export const useTranslationService = () => {
  const [language] = useContext(LanguageContext);
  
  useEffect(() => {
    // 同步Context中的语言到服务
    updateCurrentLanguage(language);
    // 订阅语言变化（其实组件本身会因Context变化重渲染，这里主要是给非组件环境用）
    const unsubscribe = subscribeToLanguageChange(() => {});
    return unsubscribe;
  }, [language]);

  return t;
};

使用方式： #

• 组件中：用useTranslationService拿到t函数，用法和方案一一致
• 非组件环境：直接importt函数即可，但要确保App已经初始化了LanguageProvider，语言值已经被同步

内容的提问来源于stack exchange，提问作者Mertcan Seğmen