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 データベースのパスワードを変更する複数の方法

推薦する

JavaScript プロトタイプの詳細

目次1. 概要1.1 プロトタイプとは何ですか? 1.2 プロトタイプを入手する2. プロトタイプの...

iFrameは背景を覆うポップアップレイヤーとして使うのに最適です

最近、私は「ぶどうコレクション」というプロジェクトに取り組んでいます。簡単に言うと、Budou ペー...

元のPATHを上書きしてコマンドが見つからないというメッセージが表示されるコマンド失敗の問題を解決する方法

同僚から、LINUX サーバー上の多くのコマンドが (コマンドが見つかりません) というプロンプトで...

Ubuntu で時刻同期に NTP を使用する

NTP は、ネットワーク上で時間を同期するための TCP/IP プロトコルです。通常、クライアントは...

base target="" はフレームを開くためのベースリンクのターゲットを指定します

<base target=_blank> は、基本リンクのターゲット フレームを新しいペ...

JavaScript 配列重複排除ソリューション

目次方法1: set: データ型ではなくデータ構造であり、メンバーは一意である方法2: オブジェクト...

win2008 サーバー セキュリティ設定の展開ドキュメント (推奨)

私は新年を迎える前からプロジェクトに取り組んでいましたが、ここ数日で、新しいサーバー用に新しく増設し...

vue+element カスタムクエリコンポーネント

この記事では主に Vue プロジェクトを紹介します。要素の導入を前提として、コンポーネントを 2 回...

Vue elementUI はツリー構造テーブルと遅延読み込みを実装します

目次1. 成果を達成する2. バックエンドの実装2.1 エンティティクラス2.2 データベース内のデ...

ユーザーエクスペリエンスの構築

<br />おそらく、あなたは会社に入社したばかりで、その会社が「ユーザビリティ」に関す...

CSSアニメーションを使用して背景のシームレスな無限ループを実装する例

1. 需要絵が左から右へ無限ループで動く2. コードモバイルデバイスに適用されているため、rem 単...

ウェブデザインにおける装飾要素の応用の概要

<br />序文: このチュートリアルを読む前に、序文を注意深く読んでください。そうしな...

MySQLデータベースの基礎知識

目次1. データベースを理解する1.1 データベースとデータ構造の関係1.2 なぜデータベースが必要...

ウェブページをデザインする際に注意すべきいくつかの問題

Web デザインは、個人の好みや Web ページの内容に応じて、デザインのレイアウトが常に変化します...

シンプルな時計を実装するJavaScript

この記事では、JavaScriptでシンプルな時計を実装するための具体的なコードを参考までに紹介しま...