ネイティブの反応:BoilerPlateの概要

それは数週間(ヶ月ではない)を取ることができます反応ネイティブ、開始boilerplateは、携帯電話の開発にジャンプスタートを与えることができますか?そしてもしそうならば、どれが最高ですか?
考慮する価値のある3つのボードプレートがあります.

Ignitee - 9375スターズ

Pepperoni App Kit - 4453の星

Snowflake - 4399の星

我々は、それらのすべての最も人気の高い見ているignite ボイラプレート.

イグニトニ

イグナイトは、現在反応するための「最も熱い」CLIです.
これは、boilerplate、プラグイン、発電機などが含まれます.
点火は7.6 +のノードバージョンを必要とします.

node -v

インストール Yarn あなたのシステムのために.
次に、次のコマンドを実行してignite-cli そして、あなたのignite ボイラプレート.

$ yarn global add ignite-cli

点火は、2つの主なボイラー板を含みます

アンドス

The tried and true (React Navigation, Redux, & Redux Saga)

以下を含みます:

反応ネイティブ0.57.7

ナビゲーション3.0.0反応

リドゥ

レドゥクスサガ

もっと!

ボウザー

The latest and greatest (React Navigation, MobX State Tree, & Typescript)

このボードプレートには、次のものが含まれています.

ネイティブに反応する

反応ナビゲーション

Mobxステートツリー

タイプスクリプト

Reactotron ( 2 . xが必要)

もっと!

私はこのポストでこれらのサービスについて詳細には行きません.私はテストの後、好ましいBoilerplateを選びます、そして、サービスは詳細に将来のポストで説明します.

方法:

レッツ選択ignite s最新のボイラープレートbowser .
まず、Bowser BoilerPlateを起動するには、次のコマンドを実行してbowser ターミナルメニューから

$ ignite new MyNewAppName
-----------------------------------------------
  (                  )   (
  )\ )   (        ( /(   )\ )    *   )
 (()/(   )\ )     )\()) (()/(  ` )  /(   (
  /(_)) (()/(    ((_)\   /(_))  ( )(_))  )\
 (_))    /(_))_   _((_) (_))   (_(_())  ((_)
 |_ _|  (_)) __| | \| | |_ _|  |_   _|  | __|
  | |     | (_ | | .` |  | |     | |    | _|
 |___|     \___| |_|\_| |___|    |_|    |___|
-----------------------------------------------

An unfair headstart for your React Native apps.
https://infinite.red/ignite

-----------------------------------------------

🔥 igniting app BowserStyle
? Which boilerplate would you like to use? Bowser (React Navigation, MobX State Tree, & TypeScript)
> Bowser  *
> Andross

あなたが開くならばNewAppProject ディレクトリが表示されますignite を使用して標準的なセットアップに比べてreact-native new or expo init コマンド.
ランシミュレーター

For iOS:
  cd ProjectFolder
  react-native run-ios

For Android:
  cd ProjectFolder
  react-native run-android

CLIがコマンドラインで何ができるかを確認するには、次の手順に従います.

  cd ProjectFolder
  ignite

プロジェクトディレクトリ構造

プロジェクトの構造は、より単純であるreact-native new / expo init デフォルトのプロジェクト構造.
プロジェクト構造は次のようになります.

ignite-project
├── app
│   ├── components
│   ├── i18n
│   ├── models
│   ├── navigation
│   ├── screens
│   ├── services
│   ├── theme
│   ├── utils
│   ├── app.tsx
│   ├── environment-variables.ts
├── storybook
│   ├── views
│   ├── index.ts
│   ├── storybook-registry.ts
│   ├── storybook.ts
├── test
│   ├── __snapshots__
│   ├── storyshots.test.ts.snap
│   ├── mock-i18n.ts
│   ├── mock-reactotron.ts
│   ├── setup.ts
│   ├── storyshots.test.ts
├── README.md
├── android
├── ignite
│   ├── ignite.json
│   └── plugins
├── index.js
├── ios
└── package.json

ディレクトリに深く入りましょうBowser .

//アプリケーションディレクトリ

デフォルトの構造コマンドを実行するときにapp ディレクトリがあります.
インサイドapp ディレクトリには以下のようになります.

app
│── components
│── i18n
├── models
├── navigation
├── screens
├── services
├── theme
├── utils
├── app.tsx
├── environment-variables.ts

コンポーネント
これはあなたのコンポーネントが住んでいるところです.通常は、.js ファイル.以来bowser TypeScriptを含みます、各々の構成要素は、Aを含んでいるディレクトリを持ちます.tsx ファイルと共にstory.tsx ファイル.必要に応じてコンポーネントが大きい場合、コンポーネントディレクトリに含めることができますpreset.ts , and props.ts より良い組織のためのファイル.
I 18 n
あなたが含まれるならばreact-native-i18n サービス、これはあなたの翻訳が住んでいるところです.
モデル
これはあなたのモデルとモデルロジックが住んでいるところです.それぞれのモデルにはmobx-state-tree モデルファイル、テストファイル、アクション、タイプなどの他のサポートファイル.
ナビゲーション
あなたreact-navigation ファイルはこちら.
スクリーン
画面全体を占めて、ナビゲーション階層の一部である反応画面構成要素は、ここで生きます.各ディレクトリには.tsx ファイル、資産またはヘルパーファイル.
サービス
サービスは、残りのAPIのような外部の世界とのインターフェイス、プッシュ通知など、ここに住んでいます.
テーマ:
あなたのテーマはここで、間隔、色、タイポグラフィ、タイミングなどを含む構築住んでいます.
Utils :
ヘルパーのような共有ファイル、日付ヘルパー、フォーマッタなどのユーティリティは、しばしばここに置かれます.ヘルパーまたはユーティリティがアプリケーション内の特定のコンポーネント/モデルによってのみ使用されている場合、ファイルはそのコンポーネント/モデルと一緒に生活する必要があります.
アプリ.TSX :
あなたのアプリケーションへのエントリポイント.メインアプリケーションコンポーネントは、アプリケーションの残りの部分をレンダリングします.また、StoryBookモードでアプリケーションを実行したい場合は、選択することができます.

//ディレクトリ

ここがどこですignite CLIと万物ignite ライブ.ジェネレータ、プラグインや例を始めるために含まれています.

//絵本ディレクトリ

これはストーリーが登録され、どこでストーリーブックの設定が有効になります.
Storybook UIコンポーネントの迅速な反復処理とテストのためのUI開発環境です.これは、あなたのアプリケーションの個々のコンポーネントのさまざまな状態を可視化し、UIの相互作用をテストすることができます.

//テストディレクトリ:

これはあなたの冗談のコンフィギュレーションとモックが住んでいるところです.だけでなく、storyshotsテストファイルです.

アタッチへの接続

あなたが私のようであるならばexpo ツールチェーンは、あなたのプロジェクトのキックをすると、まだ1つの点火のboilerplateを使用するようになります簡単にコマンドを使用します.

expo init <AppName>
cd <AppName>
ignite attach
// Then choose which boilerplate you would like to use

これも次のようになります.

ネイティブアプリ

クリエイトアプリ

正常リーチJSプロジェクト

ディレクトリ

すべてのプラグインがすべての環境で動作するわけではありません.
詳細についてはhttps://expo.io/ !