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