React Native 06 - 번역 앱 | delaying's dev log

번역 앱 프로젝트를 진행하면서 알게된 내용들을 작성한 글이다.

결과 화면

Localization

localization은 각각의 언어설정에 따라 번역해주는 기능이다.

npx expo install expo-localization 로 설치한다.

다음처럼 사용할 수 있다.

import { getLocales } from "expo-localization";

const deviceLanguage = getLocales()[0].languageCode;

export default function App() {
  return (
    <View style={styles.container}>
      <Text>{deviceLanguage}</Text>
    </View>
  );
}

현재 설정되어 있는 언어를 가져와서 그에 따라 문자를 번역한다.

앱 내에서 번역하기위해 i18n-js 라이브러리를 사용한다. npx expo install i18n-js

internalization 약자인데, i와n사이에 18글자가 존재한다는 뜻이다.

언어별로 키와 값을 입력하고, i18n.t()에 key를 넣어주면 현재설정된 언어의 value가 출력된다.

import { I18n } from "i18n-js";

const i18n = new I18n({
  en: { welcome: "hello" },
  ja: { welcome: "hello" },
});

const deviceLanguage = getLocales()[0].languageCode;
i18n.locale = deviceLanguage;

export default function App() {
  return (
    <View style={styles.container}>
      <Text>{deviceLanguage}</Text>
      <Text>{i18n.t("welcome")}</Text>
    </View>
  );
}

SplashScreen

SplashScreen은 앱을 처음 실행했을 때 보이는 로딩화면을 설정할 수 있다.

npx expo install expo-splash-screen

splashScreen화면이 자동으로 사라지는 것을 preventAutoHideAsync()함수로 막고, 사용자가 커스텀 할 수 있다.

SplashScreen.hideAsync()함수로 원하는 타이밍에 로딩화면을 닫을 수 있다.

import * as SplashScreen from "expo-splash-screen";

SplashScreen.preventAutoHideAsync();

export default function App() {
  useEffect(() => {
    SplashScreen.hideAsync();
  }, []);
}

splash 이미지 바꾸기

피그마에서 splashScreen 템플릿을 지원한다.

필요한 템플릿을 copy한 후, 원하는 모양으로 만들 수 있다.

원하는툴에 바꿀 이미지를 넣고 create component로 합친 후 export 한다.

assets폴더에서 splash.png파일을 대체하면 완성이다.

Lottie

expo-Lottie는 코드로 작성된 움직이는 애니메이션을 vector 이미지처럼 용량도 가볍고, 사이즈도 구애받지 않고 사용할 수 있다.

npx expo install lottie-react-native

lottieFiles에서 원하는 애니메이션을 고르고 lottie json형식으로 다운로드한다.

json파일을 assets폴더에 넣고, LottiView를 작성하면된다.

import { View } from "react-native";
import LottieView from "lottie-react-native";

export default () => {
  return (
    <View style={\{ flex: 1, backgroundColor: "lightblue" }\}>
      <LottieView
        autoPlay
        style={\{
          width: 200,
          height: 200,
          backgroundColor: "#eee",
        }\}
        // Find more Lottie files at https://lottiefiles.com/featured
        source={require("../assets/loading.json")}
      />
    </View>
  );
};

react-string-format

react-string-format은 문자열, 숫자 및 native 요소를 매개변수로 사용하여 문자열 형식을 지정한다.

{
  "today_is": "Today is {1}/{2}/{0}."
}

위 형태의 string형태를 format을 사용해서 {}안의 내용을 원하는대로 바꿀 수 있다.

import { format } from "react-string-format";

const todayText = format(t("today_is"), 2023, 11, 1);

expo font

프로젝트에서 사용할 폰트를 다운받은 후, expo font를 설치한다.

npx expo install expo-font

폰트파일을 assets/fonts 폴더에 붙여넣고, 아래처럼 작성한 후 fontFamily로 사용하면된다.

const [fontsLoaded] = useFonts({
  "Inter-Black": require("./assets/fonts/Inter-Black.otf"),
});

React Native 06 - 번역 앱