Vega OS用のプラットフォーム固有のコード

​

Platformモジュール

​

Platform.OS

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      kepler: {
        backgroundColor: 'blue',
      },
      ios: {
        backgroundColor: 'red',
      },
      android: {
        backgroundColor: 'green',
      },
    }),
  },
});

​

Platform.select()

import { Platform } from 'react-native';

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

​

プラットフォーム固有の拡張子

​

例

Button.kepler.tsx
Button.ios.tsx
Button.android.tsx

import Button from './Button';

• Vega OSの場合：Button.kepler.tsxが読み込まれます。
• iOSの場合：Button.ios.tsxが読み込まれます。
• Androidの場合：Button.android.tsxが読み込まれます。

​

サポートされる拡張子

• .kepler.tsx - JSXを使用するTypeScript
• .kepler.ts - TypeScript
• .kepler.jsx - JSXを使用するJavaScript
• .kepler.js - JavaScript

​

Tree Shakingとプラットフォーム固有のコード

​

動作のしくみ

1. ビルドプロセス中にターゲットプラットフォームを検出します。
2. Vega OSバンドルに.keplerファイルのみを取り込みます。
3. 最終的なバンドルから.iosファイルと.androidファイルを除外します。
4. 使用されていないプラットフォーム固有のコードブランチを削除します。

​

重要な注意事項

Button.kepler.tsx  ✓
utils.kepler.js    ✓

Button.vega.tsx    ✗
utils.vega.js      ✗

​

ベストプラクティス

1. 違いが大きい場合はプラットフォーム固有のファイルを使用する：プラットフォーム間で実装が大きく異なる場合は、別のファイルに分離して.kepler拡張子を付けます。
2. 違いが小さい場合はPlatform.select()を使用する：スタイル設定や単純な条件付きロジックなどの小さい違いを実装するには、1つのファイル内でPlatform.select()またはPlatform.OSのチェックを使用します。
3. 共有ロジックを共通のファイルにまとめる：プラットフォームに依存しないロジックは、プラットフォームの拡張子を付けずに共有ファイルにまとめて、できるだけコードを再利用します。
4. Tree Shakingを利用する：プラットフォーム固有の拡張子を使用して、関連するコードだけをVega OSバンドルに含めるようにします。これにより、パフォーマンスを高め、バンドルサイズを小さくすることができます。

​

関連リソース