React Native-プロジェクトの作成

新しいReact Nativeプロジェクトの作成

端末に次のコマンドを入力

$ npx react-native init LearnReactNative

npxはノードです.jsと一緒にインストールするツール.
Node.js環境で動作するCLIツールをより使いやすくします.
作成したアイテムを開き、パッケージ化します.jsonを表示すると、次のコードが表示されます.

"scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  }

スクリプトを設定すると、次のコマンドを実行できます.

$ yarn <스크립트 이름>

糸android:アンドロイド環境でのアプリケーションドライバ

糸ios:ios環境でのアプリケーションドライバ

糸start:Metro駆動

Metro:プロジェクトで使用されているJavaScriptファイルをすべて読み込み、それらを1つのファイルに統合し、反応ネイティブアプリケーションで実行する準備をします.

Android Studioで反応本機を起動

Android Studioを開き、Openを押してプロジェクトを開きます.生成されたリアクションネイティブフォルダを表示すると、androidフォルダが表示され、フォルダを選択して開きます.

AndroidスタジオにAVDをインストールします.
インストールが完了したら、ビジュアルコードに戻り、次のコードを入力します.
端末は、入力ctrl + `キーによって開くことができる.

$ yarn android

私の場合、以下のエラーが発生しました.
error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup .
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081
端末では、Android Gradleバージョンをアップグレードする必要があることに気づきました.

* What went wrong:
A problem occurred evaluating project ':app'.
> Failed to apply plugin 'com.android.internal.application'.
   > Android Gradle plugin requires Java 11 to run. You are currently using Java 1.8.

グラフィックJDKを1.8から11に変更し、Android Studioとビジュアルコードを再実行します.

次に$ yarn androidを実行し、シミュレータは次のように動作します.

iOS環境でのネイティブアプリケーションの起動

$ yarn ios

上記のコマンドで駆動できますが、Apple Silicon

$ cd ops
$ pod install

以上の2つのコマンドを実行する必要があります.$ pod installを実行中にエラーが発生しました.次のブログを参照してください.
https://velog.io/@sunhwa508/react-native-pod-install%EC%8B%9C-%EC%98%A4%EB%A5%98-new-Macbook-M1-crash-DiagnosticReports

ios環境でも良好な結果が見られます.
プロジェクト開発環境の設定が完了しました.