アンドロイド/IOSベースの資産束

ネイティブに対してコードを実行するには2つの方法があります.
Platformモジュールを使用する

.

Platform-specificファイル拡張子を使用する

.

これらの2つのアプローチを使用して、プラットフォーム固有のローカル資産をバンドルし、どちらが良いかを検証します.

プラットフォームモジュールの使用

プラットフォームモジュールを使用して以下のコードスニペットでは、イメージをAndroid/IOSに基づいてレンダリングします.これは期待通りに動作するが、この方法を用いる欠点がある.
アプリ.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ファイル.これは、1つの画像の代わりに、束サイズを増加させる.

プラットフォーム固有のファイル拡張子の使用

この欠点を避けるために、必要なイメージだけを束ねるプラットフォーム特有のファイル拡張メソッドを使用します.
ネイティブファイルは、ファイルがあるときに検出されます.IOS.または.アンドロイド.他のコンポーネントから必要なときに関連するプラットフォームファイルを拡張して読み込む.
この例を実行するには、2つのファイルimagefileを作成します.アンドロイド.jsとimagefileIOS.拡張子なしでファイル名をインポートします.
imagefileアンドロイド.js

export default from './android.png';

imagefileIOS.js

export default from './ios.png';

アプリ.js

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


<Image source={imageFile} />;

また、これは期待通りに、ボーナスとして必要な資産がバンドルされ、削減されます.APKと.IPAサイズ.