React Native + node.この記事では、jsログインの例の実行手順と進捗状況を記録します.
Reference for login example
✔ Github

ノードサーバの設定

git clone https://github.com/SnehalAgrawal/about-react-dummy-apis.git
cd about-react-dummy-apis
npm install
npm start

cmdを開き、以上のコマンドを入力してサーバを設定します.

開発環境の構築

npm install -g react-native-cli
react-native init ProjectName

cd ProjectName
npm install @react-navigation/native --save
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view --save
npm install @react-navigation/drawer --save
npm install @react-navigation/stack --save
npm install --save @react-native-community/async-storage

cmdを開き、上記のコマンドを入力して開発環境を構築します.

ディレクトリとファイル構造の作成

✔ ソースコードのダウンロード

プロジェクトの構造は上のイメージのようにしなければならない.

アンドロイドルームの設定

Tools->SDK Management->SDKプラットフォーム下のチェックボックス「Show Package Details」をチェックし、Android API 32をフルインストール
Tools->SDK manager->SDK ToolsからGoogle Play Licensing Libraryをインストール
次にTools->デバイスマネージャからデバイスを作成->PhoneタブからPixel 2を選択し、Next->API 32を選択し、Next->Finishを選択してシミュレータを起動します

アプリケーションの実行

cd ProjectName
react-native run-android

cmdを再開し、上記のコマンドを使用します.

ホットスポット

❗ Failed to launch emulator.

これらのエラーは、ここです。、ここです。を参照してAndroid Studioシミュレータを再実行し、解決されました.

❗ Unable to make field private final java.lang.String java.io.File.path accessible: module java.base does not "opens java.io" to unnamed module

バージョン7.1.1のGradleを受け取りました次のコードがpropertiesに追加されました.
リファレンス

cd android
gradlew wrapper --gradle-version=7.1.1
cd ..

> gradle.properties에 아래코드 추가.
org.gradle.jvmargs=-Xmx1536M --add-exports=java.base/sun.nio.ch=ALL-UNNAMED --add-opens=java.base/java.lang=ALL-UNNAMED --add-opens=java.base/java.lang.reflect=ALL-UNNAMED --add-opens=java.base/java.io=ALL-UNNAMED --add-exports=jdk.unsupported/sun.misc=ALL-UNNAMED

=>react-native run-android正常動作完了!
シミュレータでもアプリケーションが実行されていることがわかります.
でも….

❗ Unable to resolve module @react-native-community/async-storage from C:\Users\jo\please\Screen\SplashScreen.js

=>react-navigation関連のインストールはまだ完了していません.上に構築した開発環境を再インストール

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context
npm uninstall react-native-gesture-handler --save
npm install react-native-gesture-handler --save
react-native link react-native-gesture-handler
npm install @react-navigation/stack
npm install @react-navigation/drawer

❗ Reanimated 2 failed to create a worklet — Maybe You Forgot to Add Reanimated’s babel Plugin?

=> babel.config.jsに次のコードを追加すればいいです.

  plugins: ['react-native-reanimated/plugin'],

Reference for debuging
✔ https://parkho79.tistory.com/175
✔ https://docs.expo.dev/bare/installing-expo-modules/
✔ https://reactnative.dev/docs/running-on-device
✔ https://stackoverflow.com/questions/27620262/sdk-location-not-found-define-location-with-sdk-dir-in-the-local-properties-fil
✔ https://stackoverflow.com/questions/67093053/react-native-execution-failed-for-task-appgeneratepackagelist
✔ https://docs.gradle.org/7.4/userguide/installation.html#installation
✔ https://drcode-devblog.tistory.com/103
✔ https://security-nanglam.tistory.com/474
✔ https://stackoverflow.com/questions/67135414/w-detected-multiple-kotlin-daemon-sessions-at-build-kotlin-sessions
✔ https://stackoverflow.com/questions/67782975/how-to-fix-the-module-java-base-does-not-opens-java-io-to-unnamed-module
✔ https://reactnavigation.org/docs/getting-started/
✔ https://javascript.plainenglish.io/error-reanimated-2-failed-to-create-a-worklet-maybe-you-forgot-to-add-reanimateds-babel-plugin-525c6003024c