我想僅使用 redux 將我的 react native 應用程式國際化，但為了簡潔起見，我將避開與 redux 相關的部分，因為整個應用程式運行良好。對于應用程式的每個螢屏組件，我創建一個背景關系來包裝螢屏組件并傳遞與螢屏相關的所有字串
所以我在一個單獨的檔案中創建了背景關系，我將其匯出為Language：
import React, { useContext, createContext } from "react";
import { useSelector } from "react-redux";
import { getTranslation } from "../../../redux/reducers/translation/selector/selector";
import {language} from "./Util";
export const Context = createContext();
export const useLanguageContext = () => {
return useContext(Context);
};
export default function Language({ children }) {
const translation = useSelector(getTranslation);
const lang = language(translation.lang);
return <Context.Provider value={lang}>{children}</Context.Provider>;
}
translation.lang是從 redux 中language獲取的當前語言，我傳遞給函式以相應地獲取與螢屏相關的字串。在這種情況下，它將是入口螢屏。這是language函式的邏輯：
import french from "../../../i18n/french/auth/entrance/i18n";
import english from "../../../i18n/english/auth/entrance/i18n";
import spanish from "../../../i18n/spanish/auth/entrance/i18n";
import wolof from "../../../i18n/wolof/auth/entrance/i18n";
export const language = (translation) => {
switch (translation) {
case "french":
return french;
case "english":
return english;
case "spanish":
return spanish;
case "wolof":
return wolof;
default:
return french;
}
};
我用這樣的背景關系包裹入口螢屏
import React from "react";
import { View } from "react-native";
import { Slider, Button } from "../../../components/organisms/auth/Entrance";
import Language from "../../../utils/language/context";
import { styles } from "./Style";
export default function Entrance() {
return (
<Language>
<View style={styles.container}>
<Slider />
<Button />
</View>
</Language>
);
}
最后，從像 Button 這樣的子組件，我可以檢索這樣傳遞的語言物件
import React from "react";
import { Text, TouchableOpacity } from "react-native";
import { useNavigation } from "@react-navigation/native";
import { useLanguageContext } from "../../../../../../utils/language/context";
import { styles } from "./Style";
export default function Button() {
const lang = useLanguageContext();
const navigation = useNavigation();
return (
<TouchableOpacity
style={styles.container}
onPress={() => {
navigation.navigate("LoginNavigator");
}}
>
<Text style={styles.text}>{lang.login}</Text>
</TouchableOpacity>
);
}
現在所有這些都作業得很好，但主要問題是我將有很多螢屏，并且不想重復為每個螢屏創建背景關系的程序。有沒有一種更簡潔的方法來創建一種可以用于不同螢屏的背景關系模板，而不是為每個螢屏創建一個？
uj5u.com熱心網友回復：
如果此實作的目的是分離每個螢屏的翻譯，那么您可以將一個屬性傳遞給背景關系提供程式，該提供程式只抓取您想要的螢屏的翻譯。
一個讓匯入語言更容易而不是單獨匯入每個語言的很酷的技巧是創建一個索引檔案，從一個條目匯出它，例如：
而不是擁有
import french from "../../../i18n/french/auth/entrance/i18n";
import english from "../../../i18n/english/auth/entrance/i18n";
import spanish from "../../../i18n/spanish/auth/entrance/i18n";
import wolof from "../../../i18n/wolof/auth/entrance/i18n";
在里面創建一個索引檔案../../../i18n/french/auth，匯出特定螢屏的翻譯，像這樣
export * as entrance from "./entrance/i18n"
export * as login from "./login/i18n"
// etc
然后，從每個語言檔案夾，一個索引檔案，從一個地方匯出相關的翻譯
export * from "./auth"
export * from "./home"
// etc
這樣就可以像這樣訪問它，其中螢屏是要獲取翻譯的螢屏的名稱，而翻譯是語言
import french from "../../../i18n/french"
// other languages
export const language = (screen, translation) => {
switch (translation) {
case "french":
return french[screen];
// other languages
default:
return french[screen];
}
};
希望你覺得這有幫助！
uj5u.com熱心網友回復：
我嘗試了一些非常簡單的方法，但沒想到它會起作用 現在在 Context 檔案中，我將該language函式作為道具傳遞給 Context 將包裝的每個螢屏
import React, { useContext, createContext } from "react";
import { useSelector } from "react-redux";
import { getTranslation } from "../../../redux/reducers/translation/selector/selector";
export const Context = createContext();
export const useLanguageContext = () => {
return useContext(Context);
};
export default function Language({ children, language }) {
const translation = useSelector(getTranslation);
const lang = language(translation.lang);
return <Context.Provider value={lang}>{children}</Context.Provider>;
}
然后在每個 Screen 內，我將匯入語言函式并將其與 Context 包裝在一起，如下所示：
import React from "react";
import { View } from "react-native";
import { Slider, Buttons } from "../../../components/organisms/auth/Entrance";
import Language from "../../../utils/language/context";
import { styles } from "./Style";
import { language } from "./Utils";
export default function Entrance() {
return (
<Language language={language}>
<View style={styles.container}>
<Slider />
<Buttons />
</View>
</Language>
);
}
它奏效了。@Ibrahim 感謝您的回答，我會嘗試按照您提到的方式構建翻譯檔案夾
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/315548.html