useTranslation, 언어 설정

Harry Jung·2023년 2월 28일
0

react-native/expo

목록 보기
2/2
  1. locale 설정
import {useTranslation} from '../hooks/';
  1. 선언하기
  const {t, locale, setLocale} = useTranslation();
  const isEN = locale.includes('en'); 
  1. 트리거
       <Switch
            checked={!isEN}
            onPress={(checked) => setLocale(checked ? 'kr' : 'en')}
        />
  1. 사용하기
          <Text> {t('screens.client')} </Text>
  1. index.ts / en.json / kr.json
import * as en from './en.json'
import * as fr from './fr.json'
import * as kr from './kr.json'

export default {
  en,
  fr,
  kr
}

en.json

{
  "navigation": {
    "home": "Cargo4U Home",
    "tracking": "My tracking Status",
    "profile": "Edit My Profile",
    "logout": "Logout"
  }
}

kr.json

{
    "navigation": {
      "home": "카고4U 홈",
      "tracking": "내 예약 확인",
      "profile": "프로필 수정하기",
      "logout": "로그아웃"
    }
}
  1. 기본 디폴트 언어 설정 useTranslation
useTranslation.tsx

  const [locale, setLocale] = useState('kr');
profile
Dreamsoft

0개의 댓글