React Nativeはかなり新しいテクノロジーであり、一見すると多くの初心者開発者にとって特効薬のように見えます。 記事では、この神話を払拭し、React Nativeの何が間違っているのか、それを使用する前に待つ価値がある理由を説明したいと思います。
そして、順番に、私はフルスタック開発者です。 フロントエンドとバックエンドで最新のJavaScript標準を使用しています。 モバイルアプリケーションの開発経験はありませんが、node.js、asp.net mvcでの高負荷プロジェクトの開発には5年の経験があります。 Android用のLessPassクライアントであるシンプルなモバイルアプリケーションを作成するときに、React Nativeを試すことにしました。
LessPassについて少し 。 このアプリケーションはパスワードマネージャーです。 パスワードは保存されず、サイトアドレス、ユーザー名、マスターパスワードを受け入れる巧妙なハッシュ関数を使用してパスワードを計算するたびに保存されます。 したがって、アプリケーションのMVPバージョンは1つの画面であり、3つの入力フィールドと1つのボタンがあり、パスワードを生成します。 さて、入門編は終わりました。プログラミング自体に移りましょう。
ホーム画面のレイアウト
React Nativeのレイアウトは、現在Web上にあるものと似ています。 基本的な要件-フレックスボックスの知識 モバイルアプリケーションのグリッドに基づいています。 アプリケーションで美しいコンポーネントを使用するには、 React Native Elementsをインストールする必要があります。 重要ではありませんが、通常のブラウザレイアウトとの違いは存在しますが、たとえば、要素には、期待するプロパティがない場合があります。 通常のディーバとスパンはありません。 多くの場合、React Native Components Guideを読んで、特定のプラットフォームから何が継承され、どのような機能があるのかを理解する必要があります。 短所は小さく、我慢できます。
React Nativeのレイアウト例：
<View style={styles.inputView}> <FormInput inputStyle={styles.inputStyle} placeholder={'Site'} keyboardType={'url'} underlineColorAndroid = 'transparent' onChangeText={(value) => this.setState({...this.state, site: value})} value={this.state.site} /> </View>
ビジネスロジック
私のアプリケーションのビジネスロジックは、指定された値（Webサイトアドレス、ログイン、マスターパスワード）でパスワードをカウントする1つの関数で構成されていました。 さらに、この関数は、lesspass node.jsライブラリにすでに実装されています 。 通常の
npm install lesspass
を作成することにし
npm install lesspass
。 ライブラリは機能しませんでした、なぜなら BufferやStreamなどのベースnode.jsクラスが必要です。 Browserifyはすぐに思い浮かび、node.jsを必要とするライブラリのブラウザーバージョンを作成できます。 しかし、React Nativeではその使用は不可能です。 その結果、cryptobrowserifyの代わりに暗号化にcryptojsを使用して関数を書き換えました。このため、パスワード生成のパフォーマンスが大幅に低下しました（100ミリ秒に対して60秒）。
このストーリーの重要なポイントは、React Nativeで作成された数百万のライブラリを使用できないことです。 はい、彼らは稼ぐ可能性がありますが、それは小さいので、あなたはそれに頼るべきではありません。 目的のライブラリが起動しない場合はどうすればよいですか？ node.jsを内部で使用しないライブラリを見つけてください。 そのようなライブラリがないか、そのパフォーマンスがあなたに合わない場合は、開発するプラットフォーム用のネイティブコンポーネントを記述する必要があります。 私の意見では、ネイティブコンポーネントの作成は、モバイル開発に不慣れなプログラマにとって、React Nativeのすべての利点を打ち消します。
デバッグ
React Nativeのデバッグプロセスは素晴らしいです。 多くのAndroid開発者は、既にReact Nativeにあるホットリロードを夢見ています。 すべてが明確で理解しやすく、通常のjavascriptブラウザーのデバッグと実質的に違いはありません。 パフォーマンスツールの可用性に満足しています。
その他
React Nativeのライブラリ全体の雰囲気は否定的です。 いくつかの例外を除いて、それらはすべて非常に若くて不安定です。 それらのいずれかをインストールすることは、Android Buildファイルの編集を意味します。 たとえば、スプラッシュスクリーンに適したライブラリが見つかりませんでした。 共有メニューを作成するためのライブラリは、React Nativeの最新バージョンでは機能しません。
まとめと結論
私の意見では、React Nativeはモバイルアプリケーションの開発には現状では適していません。 主な要因は、React Native自体の質の高いライブラリと子供の病気の欠如です。 複雑で高速なモバイルアプリケーションを作成する必要がある場合は、ネイティブプラットフォームツールを使用します。アプリケーションがシンプルで、プラットフォームとの複雑なやり取りを必要としない場合は、Cordovaを使用します。 LessPassモバイルアプリケーションのメインテクノロジーとして選ばれたのはCordovaでした。 このようなアプリケーションの作成には30分かかりましたが、パフォーマンスは許容範囲内です。
→ GitHubの React Nativeで私のアプリケーションのソースコードを見つけることができます。
コメントで、React Nativeでのアプリケーション開発の経験と完成したプロジェクトへのリンクを共有してください。