React Native環境のインストールプロセス

React Native環境のインストールプロセス

react-native インストールプロセス

1.npx react-native init AwesomeProjectがエラーを報告する

ここに画像の説明を挿入

問題を解決するには、cd ./demo/ios && pod install を実行します。

2. JDKをインストールする

(1) brew install adoptopenjdk/openjdk/adoptopenjdk8
実行中のプロジェクトで react-native doctor を実行し、エラーを報告します。
✖ JDK

  • 見つかったバージョン: 1.8.0_191
  • サポートされているバージョン: >= 8

ここに画像の説明を挿入

このエラーは環境には影響しません。公式バージョン 1.8 はバージョン 8 とも呼ばれ、医師には認識されないことに注意してください。

3. 設定ファイル ~/.zshrc を作成する

(1) echo $0 コマンドを使用して、使用しているシェルを確認できます。
(2)設定ファイル〜/.zshrcを作成する
(bashの場合は~/.bash_profile)
コマンドラインにtouch .zshrcと入力して、作成が成功したかどうかを確認します。open $HOME/.zshrcを使用してフォルダーを開き、作成が成功したことを示します。(3)ターミナルを開き、次のように入力します:/usr/libexec/java_home -V

ここに画像の説明を挿入

Java のインストール パスを確認し、Java 環境変数を設定します (必ずしも必要ではありませんが、私は設定しました)

警告: JAVA_HOME をエクスポートし、CLASSPATH をエクスポートします

![ここに画像の説明を挿入](https://img-blog.csdnimg.cn/20210516220225712.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTg1ODI5MQ==,size_16,color_FFFFFF,t_70

Javaを実行 - バージョンが表示されます

ここに画像の説明を挿入

インストールは成功しました

2. Android SDK をインストールするときに、バージョンが一致しないというエラー メッセージが表示されます。[パッケージの詳細を表示] をクリックして、対応するバージョンをインストールします。

ここに画像の説明を挿入

ANDROID_HOME環境変数を設定する

(1)Android StudioでSDKのインストールパスを確認する

ここに画像の説明を挿入

(2).zshrcでANDROID_HOME環境変数を設定する
export ANDROID_HOME= HOME / L ibrary / A ndroid / sdk export PATH= HOME/Library/Android/sdk export PATH= HOME/Library/Android/sdk export PATH= PATH: ANDROIDHOME / emulator export PATH = ANDROIDH​OME/emulator export PATH= PATH: ANDROIDHOME / tools export PATH= ANDROIDH​OME/tools export PATH= PATH: ANDROIDHOME / tools / bin export PATH = ANDROIDH​OME/tools/bin export PATH= PATH:$ANDROID_HOME/platform-tools

ここに画像の説明を挿入

環境のインストールに成功しました

4. npm run androidを実行します。

実際にはアプリをインストールできず、ポート 8081 でエラーが報告されます。外部データ ソースに切り替えると、インストールは正常になります。

これで、React Native環境のインストールに関する記事は終了です。React Native環境のインストールに関するより関連性の高い内容については、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません:
  • 反応ネイティブソフトキーボードがポップアップして入力ボックスをブロックする問題を解決する
  • Win10+Android+Yoshi Android エミュレータを使用して ReactNative 開発環境を構築する
  • FlatList プルダウン リフレッシュ プルアップ ロードに基づく React Native コード例
  • React Nativeのマルチレベルリンクを自分でカプセル化する
  • 地理的位置を取得する方法のReact Nativeの例
  • React Native テキストカルーセル実装例

<<:  Centos7 での nginx のインストールと設定に関する詳細なチュートリアル

>>:  Navicat で MySQL データベースのパスワードを変更する複数の方法

推薦する

MySQL のロックの仕組みと使用法の分析

この記事では、例を使用して MySQL のロック メカニズムと使用方法を説明します。ご参考までに、詳...

JS 非同期スタック トレース: await が Promise よりも優れている理由

概要async/await と Promise の基本的な違いは、await fn() は現在の関数...

少なくとも7日間連続して注文を行ったユーザーに対するSQLクエリ

テーブルを作成するテーブル order(id varchar(10),date datetime,o...

MySQL の削除に基づく構文エイリアスの問題

目次MySQL 削除構文エイリアスの問題mysql の delete ステートメントでエイリアスを使...

Mysqlはブール型の演算を設定します

Mysqlはブール型を設定します1. Tinyintタイプテストテーブルを作成し、blフィールドをブ...

require loaderの実装原理の深い理解

序文Node は新しいプログラミング言語ではなく、JavaScript のランタイムに過ぎないとよく...

複数のドメイン名、ポート、IP仮想ホストに基づくNginx構成

1. タイプの導入1.1 ドメインベースの仮想ホスティングいわゆるドメイン名ベースの仮想ホストとは、...

HTML のテキストエリア タグ

<textarea></textarea> は、複数行を入力できるテキスト ...

Ubuntu にグラフィック ドライバーが正常にインストールされたかどうかを確認する方法

次のコマンドを実行します: glxinfo | grep レンダリング結果が「はい」の場合、グラフィ...

6つの珍しいHTMLタグ

まず: <abbr> または <acronym>これら 2 つの記号は同じ意...

vue-routeルーティング管理のインストールと設定方法

導入Vue Router 、 Vue.jsの公式ルーティング マネージャーです。 Vue.jsのコア...

複数のサーバーにNginxリバースプロキシを実装する方法

Nginx は複数のサーバーをリバース プロキシします。つまり、nginx に異なるリクエストを送信...

Vue コード強調プラグインの総合的な比較と評価

目次総合的な比較アクティブの観点から機能的な観点から詳細な比較1. エース2. コードミラー3. モ...

HTML テーブル マークアップ チュートリアル (4): 境界線の色属性 BORDERCOLOR

テーブルを美しくするために、テーブルにさまざまな境界線の色を設定できます。基本的な構文<テーブ...

Vue+ElementUI で超大規模なフォーム例を処理する方法

最近、社内の業務調整により、以前の超長文のロジックが大幅に変更されたため、リファクタリングする予定で...