플랫폼 특화 코드 (android, ios)

React Native는 코드를 구성하고 플랫폼별로 분리하는 두 가지 방법을 제공한다.Platform modulePlatform.OSPlatform.select예시 코드플랫폼별 Component 다르게 반환하기안드로이드 버전 감지iOS 버전 감지특정 플랫폼 전용 파일 확장자Native-specific extentions
 
크로스 플랫폼 앱 개발 시 되도록이면 코드를 재사용하고 싶어 하나, 플랫폼 별로 다르게 적용하고 싶을 때가 있다.
 

React Native는 코드를 구성하고 플랫폼별로 분리하는 두 가지 방법을 제공한다.

특정 Component는 하나의 플랫폼에서만 동작하는 Props를 가지고 있을 수 있다.
이러한 모든 Props에는 @platform 으로 주석을 달고 (웹사이트에 작은 뱃지를 가진다..? ← 뭔 소리..?)
 

Platform module

React Native는 앱이 동작하고 있는 플랫폼이 어딘지 감지하는 모듈을 제공한다.
특정 플랫폼 전용 코드를 수행하려면 플랫폼 감지 로직을 이용하면 된다.
 

Platform.OS

컴포넌트의 작은 일부 코드만이 플랫폼 특화 코드라면 Platform.OS 옵션을 사용하자.
Platform.OS 옵션
  • android
  • ios
import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  height: Platform.OS === 'ios' ? 200 : 100
});
 

Platform.select

실행중인 환경에 맞는 값을 반환한다.
  • ios
  • android
  • native
  • default
폰 사용중이라면 ios나 android가 반환될텐데 특정되지 않았다면 native가 반환된다.
나머지는 default 키가 반환됨 (웹 등)

예시 코드

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1, //모든 플랫폼에 적용되는 부분은 그냥 작성하면 됨.
    ...Platform.select({
			//모바일일 경우 ios, android, native 셋중 하나 반환
      ios: {
        backgroundColor: 'red'
      },
      android: {
        backgroundColor: 'green'
      },
      default: {
        // 웹 등 다른 플랫폼일 경우 default 반환
        backgroundColor: 'blue'
      }
    })
  }
});
모든 플랫폼에 적용되는 사항
  • flex:1
플랫폼별로 다르게 적용한 옵션
  • backgroundColor ( ios:red, android:green, default:blue )
 

플랫폼별 Component 다르게 반환하기

const Component = Platform.select({
  ios: () => require('ComponentIOS'),
  android: () => require('ComponentAndroid')
})();

<Component />;
const Component = Platform.select({
  native: () => require('ComponentForNative'),
  default: () => require('ComponentForWeb')
})();

<Component />;
 

안드로이드 버전 감지

android의 경우 Platform module이 사용중인 안드로이드 버전 감지에도 사용될 수 있다.
import { Platform } from 'react-native';

if (Platform.Version === 25) {
  console.log('Running on Nougat!');
}
 

iOS 버전 감지

ios의 경우 Version에는 native의 -[UIDevice systemVersion]의 반환값(문자열)이 담긴다.
notion image
문자열이 반환된다는 점만 인지하고 자유롭게 사용하면 된다.
아래는 버전의 major version을 이용하는 코드 예시다.
import { Platform } from 'react-native';

//반환되는 문자열을 Int의 10진수 형태로 자르니까 소수점은 날아가고 major version만 남음
const majorVersionIOS = parseInt(Platform.Version, 10);

if (majorVersionIOS <= 9) {
  console.log('Work around a change in behavior');
}
 

특정 플랫폼 전용 파일 확장자

(Platform-specific extensions)
 
플랫폼 전용 코드의 크기가 크다면 별도 파일로 나눌 것을 권장한다.
React Native는 다른 Components로부터 required될 때 파일이 .ios. 또는 .android. 확장자를 가지고 있는지를 감지하고, 관련된 플랫폼 파일을 로드한다.
 
예를들어 아래와 같은 파일을 가지고 있다고 가정해 보자.
  • BigButton.ios.js
  • BigBusson.android.js
이 때 아래와 같이 코드를 작성하면 React Native가 실행중인 플랫폼 환경에 따라 .ios. 파일 혹은 .android. 파일을 알아서 로드한다.
import BigButton from './BigBusson';
//현재 실행 디바이스 환경이 ios라면 -> BigButton.ios.js 파일이 로드되고
//현재 실행 디바이스 환경이 android라면 -> BigButton.android.js 파일이 로드된다.
 

Native-specific extentions

(i.e. sharing code with NodeJS and Web)
 
NodeJS/Web과 React Native 간에 모듈을 공유해야 하지만 Android/iOS 차이가 없는 경우 .native.js 확장자를 사용할 수도 있다. 이는 React Native와 ReactJS 간에 공통 코드가 공유되는 프로젝트에 특히 유용하다.
 
예를 들어 아래와 같이 파일이 있다고 가정하고 코드를 작성해 보자.
  • Container.js
      • 웹 팩, 롤업 또는 기타 웹 번들러에서 픽업된다.
  • Container.native.js
      • Android와 iOS 일 때 Resact Native 번들러에 의해 선택됨
#.native. 확장자는 적지 않아도 된다. React Native가 알아서 구분해서 로드한다.
improt Container from './Container';
 
추가 팁 : Web Bundelr가 .native.js 확장자를 무시하도록 설정해라
사용되지도 않을 코드가 production bundle에 포함되는 경우를 피하기 위해
⇒ 최종 번틀 크기가 줄어든다.