[reactNative]を開始

React Native開発環境

Expo CLI
準備:ノード.js、デバイスまたはシミュレータ
最初の方法はReactNativeを中心に構築されたツールセットです.多くの機能が含まれていますが、不要な機能がインストールされているので重いです.

React Native CLI
準備:Xcode(iOS)またはAndroid Studio(Windows)

Resact Native CLIはExpo CLIの一大ホットスポットとなる

1.chocolateyインストール

:Windows用のパッケージマネージャ(注:https://chocolatey.org/install)

コマンドプロンプト(CMD)管理者権限で実行

Chocolatey官网install推荐贴り付け

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

Chocolatey取付確認

choco -v

- Node.jsのインストールと検証

choco install -y node.js install
node --version
npm --version

-jdk 8のインストールと検証(jdk 8を超えてインストールする必要があります)

choco install -y jdk8

Windowsユーザーを使用してAndroid Studioをインストールする
iOSユーザーは公式サイトにアクセスしてください(https://reactnative.dev/docs/environment-setup)

2.Android Studioのインストール

(注:https://developer.android.com/studio?hl=ko)
インストールされているため、重要な部分を簡単に説明するだけです.

SDK Components Setup
すべての項目を選択してインストールします.
特にIndet HAXMは、シミュレータが使えるファイルなのでインストールが必要です.

File > Settings > Othser Settings > Kotlin Compiler
Kotlin to JVMのTarget JVMバージョンは1.6で、互換性の問題でエラーが発生する可能性があるため、1.8に変更しました.

File > Settings > Appearance&Behavior > System Settings > Android SDK
右下のShow Package Detailsをチェックし、Android 9.0(Pie)で次のパッケージを見つけ、チェックしてインストールします.(Apply)

また、Android SDK LocationのSDKパスをコピーします.

3.環境変数の設定

コントロールパネル>システムとセキュリティ>システム

拡張システム設定>拡張>環境変数

「ユーザー」のユーザー変数>新規
変数名:ANDROID HOME
変数値:SDKパス(コピーしたパスを貼り付けます).

「ユーザー」のユーザー変数>パス選択後編集>新規作成
SDKパスplatform-tools編集.

コマンドプロンプトの実行
コマンドプロンプトで確認します.

adb

4.React Native CLIのインストールと検証

npm install -g react-native-cli

デバッグ履歴

port
インストール中にポートエラーが発生する可能性があります.
ポートをチェックして無効にするプログラムであれば、プログラムのポートを殺し、反応器で使用することができます.しかし、その時は思わなかった.ポートを変えただけだ.このときAVDポート番号も一緒に変更します.

npx react-native start --port=8088

5.React Nativeプロジェクトの作成

react-native init "project-name"

デバッグ履歴

ファイルが開いていません
プロジェクト作成のデフォルトパスC:WindowsSystem 32で作成すると、ドライブサブフォルダで作成したためにエラーが発生した可能性があるファイルを開けないエラーが発生します.したがって、コマンドプロンプトでパスを変更し、プロジェクトを作成する必要があります.

6.React Nativeプロジェクトの実施

npx react-native run-android

環境変数の設定が正しい場合は、シミュレータを自動的に実行します.

デバッグ履歴

シミュレータが動作しない
環境変数の設定も良いのですが、シミュレータは動いていません.Google検索エンジンの最後に、シミュレータは正常に動作していますが、中のアプリケーションはインストールされていないので、エラーが発生しました.
プロジェクトファイル>android>gradle>wrapper>gradle-wrapper.properties
移動後gradleバージョンを変更します.

변경 전
distributionUrl=https\://services.gradle.org/distributions/gradle-6.2-all.zip
변경 후
distributionUrl=https\://services.gradle.org/distributions/gradle-6.5-all.zip

プロジェクトファイル>android
フォルダに戻り、localに移動します.propertiesファイルを生成したら、以下のように作成します.

sdk.dir = C:\\Users\\<USERNAME>\\AppData\\Local\\Android\\sdk

お笑いの裏ストーリー
このプロジェクトの前に、アンドロイドスタジオを使用しているプロジェクトでは、シミュレータが停止して作業できなかったことがあります.シミュレータの運転基準が何なのかはわかりませんが、React Nativeプロジェクトの実行時に運転を停止したシミュレータの実行時に、探している間にAVDを簡単に削除しただけなので解決しました.

Unableto load scriptエラー

React-Nativeの初期インストール後にシミュレータを実行すると、上記のエラーが発生しますが、最終的にはGoogleで解決されました.
プロジェクトファイル>android>app>src>main
フォルダに移動した後、assetsフォルダが存在するかどうかを確認し、存在しない場合は生成します.
コマンドプロンプトで、プロジェクトandroidパスに移動し、

を選択します.

./gradlew clean

コマンドプロンプトプロジェクトフォルダで次のコマンドを実行します.

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res