Expo
ExpoはWeb Reactと同じReactアダプターを使用します。
@better-translate/react-nativeパッケージは別途存在しません。
1. パッケージのインストール
npm install @better-translate/core @better-translate/react2. 翻訳ツールの作成
lib/i18n.tsを作成します：
ts
1import { configureTranslations } from "@better-translate/core";23const en = {4 home: {5 title: "Hello from Expo",6 },7} as const;89const es = {10 home: {11 title: "Hola desde Expo",12 },13} as const;1415export const translator = await configureTranslations({16 availableLocales: ["en", "es"] as const,17 defaultLocale: "en",18 fallbackLocale: "en",19 messages: { en, es },20});3. アプリのラッピング
App.tsxを作成または更新します：
tsx
1import { BetterTranslateProvider } from "@better-translate/react";23import { HomeScreen } from "./components/home-screen";4import { translator } from "./lib/i18n";56export default function App() {7 return (8 <BetterTranslateProvider translator={translator}>9 <HomeScreen />10 </BetterTranslateProvider>11 );12}4. 画面での翻訳の使用
components/home-screen.tsxを作成します：
tsx
1import { Button, Text, View } from "react-native";23import { useTranslations } from "@better-translate/react";45import { translator } from "../lib/i18n";67export function HomeScreen() {8 const { locale, setLocale, t } = useTranslations<typeof translator>();910 return (11 <View style={{ gap: 12, padding: 24 }}>12 <Text>{t("home.title")}</Text>13 <Button14 title={locale === "en" ? "Spanish" : "English"}15 onPress={() => setLocale(locale === "en" ? "es" : "en")}16 />17 </View>18 );19}メンタルモデル
@better-translate/coreは翻訳データを管理します@better-translate/reactはExpoにプロバイダーとフックを提供します
これがほとんどのExpoアプリの完全なセットアップです。
ロケールファイルの自動生成
すべての翻訳を手書きする代わりに、CLIを使用して文字列を抽出し、ロケールファイルを生成できます：CLIガイド