create react native app redux auth
1.0.0
これは、Redux＆Local Auth＆React Navigationが組み込まれた作成とネイティブアプリの作成です。
create-react-native-app-redux-auth Reduxがプラグイン（状態管理用）に加えて、Reactナビゲーションとローカル認証を完全に完了した新しいReactネイティブアプリのすべての基礎ファイルを生成します！
ReactネイティブのすべてのコンポーネントとAPI、およびExpoアプリが提供するほとんどのJavaScript APIを使用できます。
create-react-native-app-redux-authへようこそ！完全に書かれたチュートリアルはこちらにあります。
このプロジェクトは、Create React Native AppとFSGでブートストラップされました。
Node V6以降がインストールされていることを確認し、Mobile DeviceのExpo Client 2.5.0の現在のバージョンが、Native 0.55をサポートするために、モバイルデバイスにあることを確認してください。 XcodeまたはAndroid Studioのインストールは必要ありません。
$ npm install -g create-react-native-app-redux-authcreate-react-native-app-redux-authコマンドラインツールは、いくつかの異なる方法で使用できます。
$ create-react-native-app-redux-auth Directoryでcreate-react-native-app-redux-auth実行するだけで、新しいアプリケーションファイルを含むサブフォルダーgeneratedサブフォルダーが作成されます。
あるいは、 create-react-native-app-redux-authファイルパス（相対的または絶対的なもの、さらにはまだ存在しないもの）を取得でき、宛先フォルダーを使用/作成して新しいアプリケーションファイルで入力します。
$ create-react-native-app-redux-auth path/to/any/directory/you/preferすでに作成してcd 'Dをディレクトリに入れていて、新しいアプリファイルで入力したい場合は、単に使用します.パス。
$ create-react-native-app-redux-auth . # caution, this will put the new files in your current folder!ファイルを生成したら、プロジェクトルートで次のコマンドが実行されていることを確認します（上記のようにパス引数を使用しないgenerated/ ）：
$ npm installクイックスタートするには、 2つのことを変更するだけです。
package.jsonで、「名前」をアプリの名前に変更します。IP.jsでは、IPをBackEndの完全なIPアドレスに変更します。これは、Herokuのようにlocalhost:PORT Portの展開されています。組み込みのローカル認証を有効にするために、生成されたプロジェクトは実行中のデータベースを想定します。 ReduxのAxios呼び出しにサーバーを構成する必要があります。
${IP}/auth/loginへのリクエストをペイロードで行います{電子メール：電子メール、パスワード：パスワード}。${IP}/auth/signupへの投稿リクエストを行います{電子メール：電子メール、パスワード：パスワード}。${IP}/auth/logoutへの削除要求を作成します。 $ npm start遊んでくれてありがとう！ハドケン。 ？
以下に、一般的なタスクの実行に関する情報があります。このガイドの最新バージョンはこちらから入手できます。
create-react-native-appのグローバルなインストールを非常にまれに更新するだけで、理想的には決して必要ありません。
アプリのreact-native-scripts依存関係を更新することは、 package.jsonのバージョン番号にぶつかり、プロジェクトの依存関係を再インストールするのと同じくらい簡単です。
React Nativeの新しいバージョンにアップグレードするにはreact-native 、 react 、およびexpoパッケージバージョンを更新し、 app.jsonで正しいsdkVersionを設定する必要があります。パッケージバージョンの互換性に関する最新情報については、バージョン化ガイドを参照してください。
プロジェクトが初期化されたときにYARNがインストールされた場合、依存関係はYARNを介してインストールされ、おそらくこれらのコマンドを実行するためにも使用する必要があります。依存関係のインストールとは異なり、この執筆時点でのYARNとNPMのコマンドランニング構文は同一です。
npm start開発モードでアプリを実行します。
携帯電話の博覧会アプリで開いて表示します。ファイルに編集を保存するとリロードされ、端末にビルドエラーとログが表示されます。
React Native Packagerのキャッシュをリセットまたはクリアする必要がある場合があります。そうするために、 --reset-cacheフラグを開始スクリプトに渡すことができます。
npm start --reset-cache
# or
yarn start --reset-cache
npm testテストでJestテストランナーを実行します。
npm run ios npm startと同様に、Macに参加してインストールしている場合は、iOSシミュレーターでアプリを開くことも試みます。
npm run android npm startと同様に、接続されたAndroidデバイスまたはエミュレータでアプリを開くことも試みます。 Androidビルドツールのインストールが必要です（詳細なセットアップについては、Native Native Docsを参照）。また、GenymotionをAndroidエミュレータとしてインストールすることをお勧めします。ネイティブビルド環境のセットアップが完了したら、 adbの適切なコピーを使用できるようにするための2つのオプションがあります。
adbを使用しますSettings -> ADB 。 「カスタムAndroid SDKツールを使用」を選択し、Android SDKディレクトリで更新します。 adbを使用します/Applications/Genymotion.app/Contents/MacOS/tools/ genymotion.app/contents/macos/tools/です。npm run ejectこれにより、Create React Native Appのビルドスクリプトから「排出」のプロセスが開始されます。プロジェクトをどのように構築したいかについて、いくつかの質問があります。
警告：排出を実行することは永続的なアクションです（使用するバージョン制御システムは別として）。排出されたアプリでは、Xcodeおよび/またはAndroid Studio環境をセットアップする必要があります。
app.jsonを編集して、 expoキーの下に構成キーを含めることができます。
アプリの表示名を変更するには、expo.name keyをapp.jsonのexpo.nameキーを適切な文字列に設定します。
アプリアイコンを設定するには、 expo.iconキーをapp.jsonのキーをローカルパスまたはURLに設定します。透明性を備えた512x512 PNGファイルを使用することをお勧めします。
このプロジェクトは、テストにJestを使用するように設定されています。好きなテスト戦略を構成することはできますが、Jestはすぐに機能します。 __tests__と呼ばれるディレクトリにテストファイルを作成するか、JESTでファイルをロードするための.test拡張子を使用します。テストの例については、The Templateプロジェクトを参照してください。 JESTドキュメントは、Reactネイティブテストチュートリアルと同様に、素晴らしいリソースでもあります。
環境変数を使用して、Create React Native Appの動作の一部を構成できます。
プロジェクトを開始すると、プロジェクトURLにこのようなものが表示されます。
exp://192.168.0.2:19000
そのURLの「マニフェスト」は、ExpoアプリにアプリのJavaScriptバンドルを取得してロードする方法を指示しているため、 exp://localhost:19000のようなURLを介してアプリにロードしても、Expoクライアントアプリは、開始スクリプトが提供するIPアドレスでアプリを取得しようとします。
場合によっては、これは理想的ではありません。これは、仮想マシンの内部でプロジェクトを実行する必要があり、デフォルトで印刷されたIPアドレスとは異なるIPアドレスを介してパッケージャーにアクセスする必要がある場合に当てはまります。 Create Reactネイティブアプリによって検出されるIPアドレスまたはホスト名をオーバーライドするために、 REACT_NATIVE_PACKAGER_HOSTNAME環境変数を介して独自のホスト名を指定できます。
MacとLinux：
REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname' npm start
Windows：
set REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname'
npm start
上記の例により、開発サーバーはexp://my-custom-ip-address-or-hostname:19000で聞きます。
Create React Native Appは、アプリのセットアップと開発をシンプルで簡単にするために多くの作業を行いますが、AppleのApp StoreやGoogleのPlay Storeにホストされたサービスに依存せずに展開するために同じことを行うことは非常に困難です。
Expoは、CRNAによって作成されたJSのみのアプリの無料ホスティングを提供し、Expo Clientアプリを介してアプリを共有できるようにします。これには、Expoアカウントの登録が必要です。
expコマンドラインツールをインストールし、パブリッシュコマンドを実行します。
$ npm i -g exp
$ exp publish
また、ネイティブコードを自分で構築することなく配布するためにIPA/APKを取得する場合は、Expoのスタンドアロンビルドなどのサービスを使用することもできます。
アプリを自分で構築および展開する場合は、CRNAから排出してXcodeおよびAndroid Studioを使用する必要があります。
これは通常、 npm run ejectを実行するのと同じくらい簡単です。プロジェクトで実行されます。これにより、プロセスを説明します。 react-native-cliをインストールし、Native Code Getting Guide Guide for React Nativeに従ってください。
プロジェクトの作業中にExpo APIを使用した場合、通常のReactネイティブプロジェクトに排出すると、これらのAPI呼び出しが機能しなくなります。これらのAPIの使用を継続したい場合は、「ネイティブ +エクスポークを反応する」ために排出することができます。これにより、独自のネイティブコードを作成し、Expo APIを使用し続けることができます。このオプションの詳細については、排出ガイドを参照してください。
ネットワークのタイムアウトや拒否された接続のためにアプリを携帯電話にロードできない場合、携帯電話とコンピューターが同じネットワーク上にあり、お互いに到達できることを確認することが良い最初のステップです。 Reactネイティブアプリがポート19000と19001年にアクセスする必要があるため、ネットワークとファイアウォールの設定により、これらの両方のポートでデバイスからコンピューターにアクセスできるようにします。
携帯電話でWebブラウザを開いて、Packagerスクリプトが印刷するURLを開き、 exp://をhttp://に置き換えてみてください。したがって、たとえば、端末のQRコードの下にある場合、次のように表示されます。
exp://192.168.0.1:19000
携帯電話でSafariまたはChromeを開いてロードしてみてください
http://192.168.0.1:19000
そして
http://192.168.0.1:19001
これが機能しますが、QRコードをスキャンしてアプリをロードできない場合は、Create React Native Appリポジトリでこれらの手順や受信した他のエラーメッセージに関する詳細を含む問題を開きます。
携帯電話のWebブラウザーにhttp URLをロードできない場合は、電話でテザリング/モバイルホットスポット機能（データの使用に注意してください）を使用して、コンピューターをそのWiFiネットワークに接続し、パッカガーを再起動してください。 VPNを使用している場合は、無効にする必要がある場合があります。
Macを使用している場合、 npm run iosとするときにユーザーが表示される場合があるいくつかのエラーがあります。
これらの種類のエラーをトラブルシューティングするために実行したいステップがいくつかあります。
Command Line Toolsメニューオプションが何かに設定されていることを確認します。 CLIツールが最初にHomeBrewによってインストールされている場合、このオプションは空白のままになっている場合があります。これにより、Appleユーティリティがシミュレーターを見つけるのを防ぐことができます。必ずnpm/yarn run iosを実行してから再実行してください。Reset Contents and Settings...を選択します。それが終了した後、シミュレータを終了し、 npm/yarn run iosを再実行します。QRコードをスキャンできない場合は、携帯電話のカメラが正しく焦点を合わせていることを確認し、ターミナルの2色のコントラストが十分に高いことを確認してください。たとえば、WebStormのデフォルトのテーマは、Expoアプリが使用するシステムバーコードスキャナーでターミナルQRコードをスキャン可能にするのに十分なコントラストを持たない場合があります。
これが問題を引き起こす場合は、ターミナルの色のテーマを変更してよりコントラストを獲得するか、別の端末からReactネイティブアプリを作成することを試みることをお勧めします。 Expoアプリの検索バーにPackagerスクリプトによって印刷されたURLを手動で入力して、手動でロードすることもできます。
