まず、React Native（RN）は、モバイルアプリを構築するためのクロスプラットフォームテクノロジーであることを思い出してください。多くの人が、その主な利点は2つのアプリケーションに単一のコードベースを使用することだと考えていますが、これがRNで最も価値があるとは思いません。コアバリューは、より広いWeb開発コミュニティを含むすべての利点を備えたReactを使用することです。Reactの開発者が、Reactをしっかりと経験した後、ReactNativeを使用してモバイルアプリの構築を開始することは完全に理にかなっています。しかし、モバイルの世界はウェブとは大きく異なります。今日は、モバイル開発の世界に飛び込む際に留意すべき点を共有したいと思います。
1.画面のコンパクトさ
CSSは、1/96インチの物理単位としてピクセルを操作していることを前提としています。これは、デスクトップコンピューター専用のWebサイトを作成する場合に役立ちますが、モバイルデバイス用のサイトで作業する場合は、さまざまな画面密度を考慮する必要があります。これが、デバイスごとに異なるマージン、パディング、およびデバイス用の異なるアセット（画像など）が必要な理由です。モバイルアプローチを説明する良い記事があります。または、AndroidDeveloperリソースを直接参照することもできます。
2.ナビゲーション
Webブラウザーには通常、現在のページ、履歴を保存するための戻るボタン、およびその他のアンカーがあります。代わりに、モバイルバージョンのサイトでは、画面と画面間のナビゲーションがあり、明確なパターンに従って動作します。タブを介したナビゲーション、スタックに沿ったナビゲーション、バックトラックです。React-routerを使用してこれを行うことはできませんが、代わりにReactナビゲーションライブラリを使用してレスポンシブナビゲーションを行うことができます。
React-Nativeのアニメーションタブナビゲーション
3.スタイル
ここモバイルの世界では、CSSは機能せず、CSSで機能するソリューションはどれも機能しません。CSS-in-JS、LESS、またはその他のものは使用できません。代わりに、JSONオブジェクトを使用してコンポーネントスタイルを定義できます。
注意：
- React-Nativeがスタイルをキャッシュできるように、常にStyleSheet.create（{}）を使用してください。
- Flexboxはまだここにありますが、名前が異なるだけです。
React-Nativeのスタイルの例
4.ネットワーク
React（Electronなど）を使用してWebサイトまたはデスクトップアプリケーションを構築している場合は、良好で適度に安定したインターネット接続を利用できます。しかし今、私たちはモバイルデバイスについて話しているので、ここではインターネットが非常に遅く、不安定で、あるいは存在しないことさえあります。したがって、この機能を念頭に置いてアプリケーションを開発する必要があります。接続要求、オフラインでの作業（キャッシングなど）。また、操作中に接続が切断される可能性があるため、これに備える必要があります。
5.署名
S3互換のストレージに簡単に展開できるWebサイトとは異なり、開発者が信頼されていることを電話で確認するには、モバイルアプリにデジタル署名する必要があります。このプロセスは、特にiOSの場合、開発者向けのプログラムを購入し、アプリケーションID、プロファイルを作成し、署名証明書を生成してエクスポートする必要がある場合、非常に面倒な場合があります... Androidプラットフォームでは、見た目は簡単です。1つのコマンドラインを使用するか、 Android Studioを使用して、アプリをすぐに配布します。
6.普及
繰り返しますが、コンテンツをS3または仮想マシンにアップロードするだけでは不十分です。たとえば、アプリケーションが企業であり、1つの組織の従業員のみを対象としている場合は、GooglePlayとAppStoreを経由するか、公式ストアの外部にアプリケーションを配布する必要があります。ただし、App Storeでは、アプリケーションをApp Storeに直接公開することはできません。何らかのMDMソリューションを使用するか、MS App Center、FirebaseDistributionなどを介して配布する必要があります。
さらに、店には従わなければならない多くの規則があります。これらには、アイコン、グラフィック、ユーザーインターフェイスのガイドライン、権限、セキュリティなどが含まれます。
7.ツール
VSCodeやWebStore、さらにはVimを使用してコードを編集し、Chromeをデバッガーとして使用することもできます。また、XcodeとAndroid Studioを使用して、ログ、監視ツール、ファイル編集などの利点を得ることができます。また、Flipper、Reactotron、およびReact-Nativeでの作業をスピードアップするその他のツールも気に入るはずです。
React-WebStormIDEのネイティブ
8.エミュレーター、シミュレーター、デバイス
Web開発の場合、複数のブラウザーで十分です。モバイル開発の場合、モバイルデバイスでコードを実行する必要があります。電話は使用できますが、AndroidとiOSの両方を備えたデバイスをすぐに使用できる可能性はほとんどありません。
良いニュース：Macを使用している場合は、Androidエミュレーター（Android Studioからダウンロードして実行できます）またはXcodeから構築されたiOSシミュレーターを使用できます（いいえ、少なくとも合法的に、他のハードウェアにiOSシミュレーターを置くことはできません） ）。まったく新しい体験ですが、楽しいです。
9.ネイティブコードとの関係
jsコードはそのまま残りますが、ネイティブコード（Kotlin、Swift）とも相互作用します。アプリケーションは適切にリンクされている必要があります。そうでない場合、クラッシュまたは誤動作する可能性があります。幸いなことに、バージョン0.60以降のReact-Nativeを使用すると、ほとんどの外部ライブラリでリンクが自動的に行われます。
React-Nativeアプリケーションのアーキテクチャ
10.コードの再利用
素晴らしいニュース、ついに！Webアプリケーションとモバイルアプリケーションの両方を構築している場合は、コードの一部を再利用できます。インターネットやモバイルデバイスに固有性がないため、ドメインとネットワークコード全体を確実に再利用できます。ほとんどの場合、ビジネスロジックも再利用できますが、そうなる可能性は低くなります。
今後の記事では、これらの各ポイントを詳しく見ていきたいと思います。