안드로이드와 IOS 각각 다른 컴포넌트를 사용할 때 쓸 수 있는 방법

방법 1)Platform module
방법 2)platform-specific file extension

특정 컴포넌트들은 한 가지 플랫폼에서만 작동하는 속성을 가진다
이런 속성들은 1)@platform 와 2)웹사이트에서 옆에 작은 뱃지가 있다

Platform module

: Platform 이라는 모듈
: 이를 통해 해당 앱이 돌아가고 있는 플랫폼을 알 수 있다
: 컴포넌트의 일부분만 플랫폼이 중요하면 이 옵션 사용하기 ex. 배경색을 플랫폼 별로 다르게 하는등

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

const styles = StyleSheet.create({
	height: Platform.OS === 'ios' ? 200 : 100 
    //Platform.OS : iOS를 실행할 때 ios, Android에서 돌아갈 때 android 
    //즉 여기서 ios일 때 height: 200, 아니면 100 
})

1. Platform.OS 메서드 : 어떤 플랫폼인지 반환
2. 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({ //key(플랫폼) : {스타일}
      ios: { 
        backgroundColor: 'red'
      },
      android: {
        backgroundColor: 'green'
      },
      default: {
        // other platforms, web for example
        backgroundColor: 'blue'
      }
    })
  }
});

Since it accepts any value, you can also use it to return platform-specific components, like below:

1. 
const Component = Platform.select({
  ios: () => require('ComponentIOS'), //ios용 컴포넌트를 따로 만들어서 가져온다
  android: () => require('ComponentAndroid')
})();

또는 

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

<Component />;

Android version

Platform 모듈은 Android Platform의 버전을 확인하기 위해 사용할 수 있다

import { Platform } from 'react-native';

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

Version은 Android OS가 아니라 Android API version에 맞춰져 있다

iOS version

Version : -[UIDevice systemVersion]의 결과물이다
즉 문자열이다.

import { Platform } from 'react-native';

const majorVersionIOS = parseInt(Platform.Version, 10); 
//이렇게 문자열을 숫자로 바꿔줘야 한다
if (majorVersionIOS <= 9) {
  console.log('Work around a change in behavior');
}

Platform-specific extenstions

• 플랫폼별 코드가 좀 더 복잡하면 여러 파일로 나눠서 관리하는 것도 방법
• RN은 파일이 .ios. 또는 .android. 익스텐션이 있는지 확인을 해서 관련 플랫폼 파일을 가져온다

ex.

BigButton.ios.js
BigButton.android.js

이렇게 각 플랫폼에 맞는 익스텐션이 있어도 import할 때는 아래와 같이 해도 문제 없다
RN이 현재 실행되는 플랫폼에 기반해서 적합한 파일을 가져오기 때문에!

import BigButton from './BigButton';

Native-specific extentions(i.e.sharing code with NodeJS and Web)

.native.js 익스텐션
: NodeJS/Web과 React Native 사이에서 모듈이 공유 되어야 하는데 Android/iOS 사이 차이가 없으면 이 익스텐션을 사용할 수 있다. React Native와 React 사이 공유하고 있는 코드들이 있을 때 사용하기에 좋다

Container.js # 웹용 번들러가 사용한다 ex. Webpack, Rollup 등
Container.native.js # React Native 번들러가 사용한다 for both Android and iOS (Metro)

import Container from './Container';

이렇게 따로 익스텐션 없이 가져올 수 있다

web으로 파일을 번들링하는 경우에는 native.js 익스텐션을 무시하도록 구성할 수 있다

• 효과1: 사용하지 않은 코드를 피하기 위해서는 사용할 수 있다
• 효과2 : 결과적인 번들 사이즈를 줄일 수 있다