React-native-environment-setup
React Native-環境設定
React Nativeの環境をセットアップするためにインストールする必要があるものがいくつかあります。 OSXを構築プラットフォームとして使用します。
| Sr.No. | Software | Description |
|---|---|---|
| 1 | NodeJS and NPM | You can follow our NodeJS Environment Setup tutorial to install NodeJS. |
ステップ1：create-react-native-appをインストールする
NodeJSとNPMをシステムに正常にインストールしたら、create-react-native-appのインストールを続行できます（以下に示すようにグローバルに）。
C:\Users\finddevguides> npm install -g create-react-native-appステップ2：プロジェクトを作成する
以下に示すように、必要なフォルダーを参照し、新しい反応ネイティブプロジェクトを作成します。
C:\Users\finddevguides>cd Desktop
C:\Users\finddevguides\Desktop>create-react-native-app MyReactNative上記のコマンドを実行すると、次の内容の名前が指定されたフォルダーが作成されます。
ステップ3：NodeJS Python Jdk8
Python NodeJSとjdk8がシステムにインストールされていることを確認し、インストールされていない場合はインストールします。 これらに加えて、特定の問題を回避するために最新バージョンのyarnをインストールすることをお勧めします。
ステップ4：React Native CLIをインストールする
以下に示すようにinstall -g react-native-cliコマンドを使用して、npmにreactネイティブコマンドラインインターフェースをインストールできます。
npm install -g react-native-cliステップ5：反応ネイティブを開始する
インストールを確認するには、プロジェクトフォルダを参照し、startコマンドを使用してプロジェクトを開始してみてください。
C:\Users\finddevguides\Desktop>cd MyReactNative
C:\Users\finddevguides\Desktop\MyReactNative>npm startすべてがうまくいった場合、以下に示すようにQRコードを取得します。
指示されているように、Androidデバイスでネイティブアプリを反応させる1つの方法は、expoを使用することです。 Androidデバイスにexpoクライアントをインストールし、上記で取得したQRコードをスキャンします。
ステップ6：プロジェクトを取り出す
Android Studioを使用してAndroidエミュレータを実行する場合は、 ctrl + c を押して現在のコマンドラインから抜けます。
次に、run eject command を実行します
npm run ejectこれにより、排出するオプションが表示され、矢印を使用して最初のオプションを選択し、Enterキーを押します。
次に、ホーム画面でアプリの名前と、AndroidスタジオおよびXcodeプロジェクトのプロジェクト名を提案する必要があります。
プロジェクトは正常にイジェクトされますが、エラーが表示される場合があります-
このエラーを無視して、次のコマンドを使用してAndroid用にreact nativeを実行します-
react-native run-androidただし、その前にAndroid Studioをインストールする必要があります。
ステップ7：Android Studioのインストール
Webページhttps://developer.android.com/studio/にアクセスして、Android Studioをダウンロードします。
そのインストールファイルをダウンロードした後、それをダブルクリックしてインストールを続行します。
ステップ8：AVD Managerの構成
AVD Managerを設定するには、メニューバーのそれぞれのアイコンをクリックします。
ステップ9：AVD Managerの構成
デバイス定義を選択してください。Nexus5Xが推奨されます。
[次へ]ボタンをクリックすると、システムイメージウィンドウが表示されます。 x86 Images タブを選択します。
次に、マシュマロを選択し、次をクリックします。
最後に、[完了]ボタンをクリックして、AVD設定を完了します。
仮想デバイスを構成したら、[アクション]列の下にある再生ボタンをクリックして、Androidエミュレーターを起動します。
ステップ10：Androidを実行する
コマンドプロンプトを開き、プロジェクトフォルダーを参照して、 react-native run-android コマンドを実行します。
次に、アプリの実行が別のプロンプトで開始され、そのステータスを確認できます。
あなたのアンドロイドエミュレータでは、デフォルトアプリの実行を次のように見ることができます-
ステップ11：local.properties
プロジェクトフォルダー SampleReactNative/android （この場合）の android フォルダーを開きます。 local.properties という名前のファイルを作成し、次のパスを追加します。
sdk.dir =/C:\\Users\\finddevguides\\AppData\\Local\\Android\\Sdkここで、 finddevguides をユーザー名に置き換えます。
ステップ12：ホットリロード
そして、アプリケーションをビルドするためにApp.jsを変更すると、Androidエミュレーターで変更が自動的に更新されます。
そうでない場合は、Androidエミュレーターをクリックして ctrl + m を押してから、 Enable Hot Reloading オプションを選択します。
