Я новичок, чтобы реагировать (и фактически JavaScript), и я только что реализовал локализацию. При существующем положении вещей каждый компонент, использующий локализованную строку, имеет свои собственные конфигурации локализации для i18-js
.
Кажется громоздким переопределять его каждый раз, и мне интересно, смогу ли я определить его только в одном месте, скажем App.js
, экспортировать соответствующие данные и отразить эту конфигурацию в остальной части приложениягде локализованные строки требуются.
Вот как выглядит мой код: Первый компонент
import { eng, esp } from "lib/constants";
import { es, en } from "date-fns/locale";
import i18n from "i18n-js";
function Expenses() {
const [searchTerm, setSearchTerm] = React.useState("");
const [currentlyDisplayed, setCurrentlyDisplayed] = React.useState([]);
const [dateLocale, setDateLocale] = React.useState(es);
const currentLocale = useSelector(fromLocale);
i18n.fallbacks = true;
i18n.translations = { eng, esp };
i18n.locale = currentLocale; //the stored value in redux state
return (
<View>
<Text>{i18n.t("addComment")<Text/>
<View/>
)
}
Второй компонент
import { eng, esp } from "../../lib/constants";
import { useSelector } from "react-redux";
import { fromLocale } from "../../store/modules/expenses";
import i18n from "i18n-js";
function ExpenseCard(props) {
const currentLocale = useSelector(fromLocale);
i18n.fallbacks = true;
i18n.translations = { eng, esp };
i18n.locale = currentLocale;
return (
<Wrapper>
<Button title={i18n.t("addComment")} onPress={props.addComment} />
</Wrapper>
);
}
export default ExpenseCard;
Ура!