React Native的國際化資源動態加載

React Native 的國際化（i18n）可以通過第三方庫如 react-native-localize 或 react-i18next 來實現。這些庫允許你動態加載不同語言的資源，而無需重新構建整個應用。以下是如何使用 react-native-localize 動態加載國際化資源的示例：

安裝 react-native-localize

首先，你需要安裝 react-native-localize：

npm install react-native-localize --save

配置 react-native-localize

在你的代碼中，你可以使用 react-native-localize 來獲取設備支持的語言列表：

import * as RNLocalize from 'react-native-localize';

const supportedLanguages = RNLocalize.supportedLanguages;
console.log(supportedLanguages); // 輸出支持的語言列表

動態加載語言資源

你可以創建一個函數來根據用戶選擇的語言加載相應的資源。例如，你可以使用一個對象來存儲不同語言的翻譯：

const translations = {
  en: {
    welcome: 'Welcome',
    hello: 'Hello',
  },
  es: {
    welcome: 'Bienvenido',
    hello: 'Hola',
  },
  // 其他語言...
};

function loadLanguage(languageCode) {
  return translations[languageCode] || translations.en; // 默認回退到英語
}

使用動態加載的語言資源

在你的組件中，你可以根據當前語言設置來渲染不同的文本：

import React from 'react';
import { Text } from 'react-native';
import { useSelector } from 'react-redux'; // 假設你使用 Redux 管理語言狀態

function Greeting() {
  const languageCode = useSelector(state => state.language);
  const translations = loadLanguage(languageCode);

  return (
    <Text>{translations.welcome}</Text>
  );
}

export default Greeting;

更新語言設置

當用戶更改語言時，你可以更新 Redux 狀態中的語言設置，并重新加載相應的資源：

function changeLanguage(languageCode) {
  // 更新 Redux 狀態
  dispatch({ type: 'CHANGE_LANGUAGE', payload: languageCode });

  // 重新加載語言資源
  const newTranslations = loadLanguage(languageCode);
  // 更新應用的語言設置（例如，更新 i18n 配置）
}

通過這種方式，你可以實現 React Native 應用的國際化資源的動態加載，從而提供更好的用戶體驗和更小的應用包大小。