8주차 개발일지

이동규·2023년 9월 15일

React Native 기초

목록 보기
8/10

1. I18n을 통한 언어 설정

import {I18n} from 'i18n-js';

const ko = require('./lang/lang.ko.json');
const en = require('./lang/lang.en.json');
const ja = require('./lang/lang.ja.json');
const zh = require('./lang/lang.zh.json');
const i18n = new I18n({
    ko,
    en,
    ja,
    zh,
});
i18n.enableFallback = true;// 초기화가 가능한가?
i18n.defaultLocale = "ko";// 초기 언어 설정
t: (scope) => i18n.t(scope,{locale})// locale의 따른 scope(Key) 값을 불러온다. 즉,locale이 "ko"이면 ko에 따른 객체의 key의 value를 불러온다.

언어설정 i18n라이브러리를 사용하여 각 언어들의 json파일들을 관리 할 수 있다.

2. getLocales 라이브러리를 사용하여 시스템 언어 불러오기

import {getLocales} from 'expo-localization';
const deviceLanguage = getLocales()[0].languageCode;

getLocales라는 라이브러리를 사용하여 우리의 앱의 구체적인 지역 언어들을 현지화 설정 할 수 있다.

2.랜덤함수 사용하기

//Math.random은 0초과 1미만의 범위의 소수가 출력된다.
const getRandomCookie = ()=>{  
    const cookieLen = 15;
    const randomNum = Math.floor(Math.random() * cookieLen);
    return `cookie_${randomNum+1}`;   
}

결과적으로 0~14까지의 랜덤한 숫자가 리턴 된다.

locale의 설정으로 들어간다.json을 변경한다.

3.Splash view 사용하기

import * as SplashScreen from 'expo-splash-screen';
SplashScreen.preventAutoHideAsync();// splashView를 앱 개발자가 수동으로 개발 할때 사용하는 것이다.
SplashScreen.hideAsync();// 이게 실행 될 때 까지 splash View를 계속 실행하게 된다.

Splash view를 사용하여 로딩을 실행하게 할 수있다.

import LottieView from "lottie-react-native"

LottieView를 활용하여 로딩뷰를 설정 할수 있다.

4.UseEffect의 종속성

useEffect(() => {
  // 이곳에 실행할 코드 작성
}, [dependency1, dependency2, ...]);

UseEffect의 종속성은 종속성배열의 값이 변경될 때만 useEffect함수를 실행하는 것이다.

0개의 댓글