안드로이드 expo localization, 으로 다국어 앱 만들기 총정리

원래 있는 프로젝트 구조를 한국어에서 다른 언어들도 지원하게끔 변경

1. 설치

npx expo install expo-localization i18next react-i18next

 

2. 번역 파일 구조 위치 (한국어, 영어)

├── constants/
│   └── translations/
│       ├── ko.ts                 # 한국어 번역
│       └── en.ts                 # 영어 번역

 

[전체 프로젝트 구조]

project/
├── app/
│   ├── _layout.tsx               # 루트 레이아웃
│   └── index.tsx                 # 메인 페이지
├── components/
│   └── LanguageSelector.tsx      # 언어 선택 컴포넌트
├── constants/
│   └── translations/
│       ├── ko.ts                 # 한국어 번역
│       └── en.ts                 # 영어 번역
└── i18n/
    └── index.ts                   # i18n 설정

 

// app/i18n/index.ts
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import * as Localization from 'expo-localization';
import ko from '../../constants/translations/ko';
import en from '../../constants/translations/en';

const resources = {
  ko,
  en,
};

i18n
  .use(initReactI18next)
  .init({
    resources,
    lng: Localization.locale.split('-')[0],
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

 

// app/_layout.tsx
import { Stack } from 'expo-router';
import { PaperProvider } from 'react-native-paper';
import { SafeAreaView, StyleSheet, Platform, StatusBar, View } from 'react-native';
import './i18n';

export default function RootLayout() {
  return (
    <PaperProvider>
      <SafeAreaView style={styles.container}>
        <StatusBar barStyle="dark-content" />
        <Stack
          screenOptions={{
            headerShown: false,
          }}
        />
      </SafeAreaView>
    </PaperProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
  },
});

// app/(tabs)/_layout.tsx
import { Tabs } from 'expo-router';
import { Text, View, StyleSheet, Platform } from 'react-native';
import { BannerAd, BannerAdSize, TestIds } from "react-native-google-mobile-ads";
import { useTranslation } from 'react-i18next';

export default function TabLayout() {
  const { t } = useTranslation();
  
  // Use TestIds in development, real ad unit ID in production
  const adUnitId = __DEV__
    ? TestIds.BANNER
    : "ca-app-pub-

  return (
    <View style={styles.container}>
      <View style={styles.tabContainer}>
        <Tabs
          screenOptions={{
            headerShown: false,
            tabBarActiveTintColor: '#007AFF',
            tabBarInactiveTintColor: '#8E8E93',
          }}
        >
          <Tabs.Screen
            name="index"
            options={{
              title: t('navigation.home'),
              tabBarIcon: ({ color }) => (
                <Text style={{ fontSize: 24, color }}>🏠</Text>
              ),
            }}
          />
          <Tabs.Screen
            name="calculator"
            options={{
              title: t('navigation.dividendCalculator'),
              tabBarIcon: ({ color }) => (
                <Text style={{ fontSize: 24, color }}>🧮</Text>
              ),
            }}
          />
          <Tabs.Screen
            name="etf-list"
            options={{
              title: t('navigation.etfList'),
              tabBarIcon: ({ color }) => (
                <Text style={{ fontSize: 24, color }}>📈</Text>
              ),
            }}
          />
        </Tabs>
      </View>
      
      <View style={styles.bannerContainer}>
        <BannerAd
          unitId={adUnitId}
          size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
          requestOptions={{
            requestNonPersonalizedAdsOnly: true,
            networkExtras: {
              collapsible: "bottom",
            },
          }}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  tabContainer: {
    flex: 1,
  },
  bannerContainer: {
    width: '100%',
    backgroundColor: 'transparent',
    position: 'absolute',
    bottom: Platform.OS === 'ios' ? 83 : 60, // Adjusted for tab bar height
    alignItems: 'center',
  },
});

 

 

이런식으로 적용 코드