Android/iOS 기반 에셋 번들링 : React Native

React Native는 플랫폼별로 코드를 실행하는 두 가지 방법을 제공합니다.

Platform 모듈을 사용합니다.

Platform-specific 파일 확장자를 사용합니다.

이 두 가지 접근 방식을 사용하여 플랫폼별 로컬 자산을 묶고 어느 것이 더 나은지 검증합니다.

플랫폼 모듈 사용

플랫폼 모듈을 사용하는 아래 코드 조각에서 Android/ios를 기반으로 이미지를 렌더링합니다. 이것은 예상대로 작동하지만 이 방법을 사용하는 단점이 있습니다.

App.js

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


var icon = Platform.OS === 'ios'
  ? require('./ios.png')
  : require('./android.png');
<Image source={icon} />; 

여기서 단점은 두 이미지(ios.png 및 android.png)가 .apk 및 .ipa 파일 모두에 존재한다는 것입니다. 이렇게 하면 하나의 이미지 대신 번들 크기가 증가하고 하나만 필요한 경우에도 두 이미지가 모두 존재합니다.

플랫폼별 파일 확장자 사용

이러한 단점을 피하기 위해 필요한 이미지만 묶는 플랫폼별 파일 확장자 방법을 사용합니다.

React Native는 파일에 .ios가 있는지 감지합니다. 또는 .android. 다른 구성 요소에서 필요할 때 관련 플랫폼 파일을 로드합니다.

예제에서 이를 구현하기 위해 imageFile.android.js 및 imageFile.ios.js 파일 두 개를 만들고 확장자 없이 파일 이름을 가져옵니다.

imageFile.android.js

export default from './android.png';

이미지파일.ios.js

export default from './ios.png';

App.js

import {Image} from 'react-native';
import imageFile from './imageFile';


<Image source={imageFile} />;

이것은 또한 예상대로 작동하며 보너스로 필요한 자산만 번들로 제공되고 .apk 및 .ipa 크기가 줄어듭니다.