[reactNative]を開始

5784 ワード
はんのう react native テキストリンク

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
    [学習アルゴリズム]白駿11060
    MapReduceの2つのテーブルjoinインスタンス(2)