React Native スキャフォールディングの基本的な使い方の詳細な説明

React Native スキャフォールディングの基本的な使い方の詳細な説明

プロジェクトを構築する

対応するパスでコマンドラインを実行します: react-native init 項目名(名前にはハイフンなどの特殊文字は使用できません。命名は FaceBook などの APP アプリケーション名を参照できます)

react-native --v //バージョンを表示 react-native init demo --version 0.48.0 //指定されたバージョンをインストール react-native init demo --verbose --version 0.48.0 //verboseは初期化中にインストールの詳細を表示するために使用され、インストールされているモジュールや進行状況などが含まれます npm view react-native version //react-nativeのすべてのバージョン情報を表示できます

対応するパスにジャンプし、対応するモバイル プロジェクトを実行します。

cd プロジェクト名 react-native run-ios または react-native run-android

正常の場合、操作効果は次のようになります。

ここに画像の説明を挿入

RN デバッグのヒント

開発者メニュー

開発者メニューは、React Native アプリケーションのデバッグを支援するために、React Native によってカスタマイズされた開発者メニューです。

エミュレータ上で開発者メニュー Android エミュレータを開きます。

Command⌘ + Mショートカットを使用すると、開発者メニューをすばやく開くことができます。シミュレータのメニューキーを使用して開くこともできます。

iOS シミュレーター:

Command⌘ + Dショートカットを使用すると、開発者メニューをすばやく開くことができます。

リロード

ページを更新します。ショートカット キーはcommand + Rです。

注: 更新機能は、 JavaScriptファイルを変更した場合にのみ機能します。新しいファイルを追加したり、ネイティブコードを変更したりする場合は、 Xcodeを使用してアプリケーションを再コンパイルする必要があります。

JS をリモートでデバッグする

この機能により、開発者はWebアプリケーションをデバッグするのと同じ方法でChromeでアプリケーションをデバッグできます。

バンドルの場所を変更する

パッケージのアドレスを変更する

インスペクタを切り替える

シミュレーターでコンポーネント スタイルを表示します。あまり役に立ちません。

高速更新を無効にする

高速更新を無効にする

パフォーマンスモニターを表示

この機能を有効にすると、リアルタイムのメモリ使用量、 UIおよびJavaScript FPSなどの情報を示す監視ウィンドウが表示されます。パフォーマンスの問題のデバッグに役立ちます。

エラーと警告

開発モードでは、js 部分のエラーと警告が電話またはシミュレーターの画面に直接印刷され、赤と黄色の画面に表示されます。 。

エラー

React Native プログラムの実行中に発生したエラーは画面に直接表示され、赤い背景で表示され、エラー メッセージが印刷されます。 console.error()を介して手動でエラーをトリガーすることもできます。

ここに画像の説明を挿入

警告

React Native プログラムの実行中に表示される警告も画面に直接表示され、黄色の背景で表示され、警告メッセージが出力されます。 console.warn()を介して手動で警告をトリガーすることもできます。 また、 console.disableYellowBox = trueで警告の表示を手動で無効にしたり、 console.ignoredYellowBox = ['Warning: ...'];で対応する警告を無視したりすることもできます。

Chrome デベロッパー ツール

ステップ1: リモートデバッグを開始する

開発者メニューの「JS をリモートでデバッグ」をクリックして、JS リモート デバッグ機能を開始します。 Chrome が開き、「http://localhost:8081/debugger-ui」タブ ページが作成されます。

ここに画像の説明を挿入

ステップ2: Chromeデベロッパーツールを開く

「http://localhost:8081/debugger-ui」タブの下にある開発者ツールを開きます。 Chrome メニューを開き、「その他のツール」を選択、「デベロッパー ツール」を選択します。ショートカット キー (Mac では Command⌘ + Option⌥ + I、Windows では Ctrl + Shift + I) を使用して開発者ツールを開くこともできます。

ブレークポイントデバッグ中に「説明のつかない」問題やエラーが発生した場合の一般的な解決策

ここで説明できないのは、コードが最後の瞬間まで正常に動作していたため、変更されることなく普及したということです。

1. リフレッシュ! リフレッシュ! リフレッシュ!

2. react-native run-xxxコマンドを再利用してアプリを起動します。

3. アプリを削除し、ローカルサーバーをシャットダウンし、ローカルキャッシュをクリアします

yarn: キャッシュをクリアする yarn cache clean

npm: キャッシュをクリアする npm cache clean -f

React Native スキャフォールディングの基本的な使い方についてはこれで終わりです。React Native スキャフォールディングに関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • React Native react-navigation ナビゲーションの使用法の詳細
  • ReactNative FlatList の使い方と落とし穴パッケージの概要
  • react-native fetchの具体的な使い方
  • Reactネイティブのグローバル変数の使用(コンポーネント間の通信)の詳細な説明
  • ページジャンプナビゲーションに react-navigation を使用する React-native の例
  • React-Nativeコンポーネントにおけるモーダルの使用の詳細な説明
  • ReactNative Imageコンポーネントの使用方法の詳細な説明

<<:  VMware Workstation 14 Pro インストール Ubuntu 16.04 チュートリアル

>>:  Navicatは機能ソリューション共有を作成できません

推薦する

jsを使用してカルーセル効果を実現する

今日は、参考までに、jsを使用してカルーセルマップの効果を実現する方法についてお話ししましょう。具体...

Rails APIを使用してReactアプリケーションを構築するための詳細な手順

目次バックエンド: Rails API部分フロントエンド: React部分Reactコンポーネントa...

three.js を使用してクールなアシッドスタイルの 3D ページ効果を実現します

この記事では、主にReact + three.jsテクノロジースタックを使用して3Dモデルの読み込み...

Vue要素ツリーコントロールに点線を追加する詳細な説明

目次1. 成果を達成する2. 実装コード3. その他の実装要約する1. 成果を達成する 2. 実装コ...

よくあるNginxの設定ミスの例

目次ルートの場所が見つかりませんオフバイスラッシュ安全でない変数の使用スクリプト名$uri を使用す...

Windows Server win2003、win2008R2、win2012、win2016、win2019 システム バージョン間の違い

最近、Microsoft は 2019 サーバー システムをリリースしました。一般的に、Micros...

同じページを動的にロードするための Vue ルーティングリスニングの例

目次シナリオ分析発達要約するシナリオ分析システムでは、1 つのモジュールに 3 つのサブモジュールが...

Vueはキー表示のショートカットキー効果を取得する入力コンポーネントを実装します

ページ上でショートカットキーをカスタマイズする要件に遭遇し、ショートカットキーを設定して表示する場所...

収集する価値のあるCSS命名規則(ルール) よく使われるCSS命名規則

CSS命名規則(ルール) よく使われるCSS命名規則ヘッダー: ヘッダーコンテンツ: コンテンツ/コ...

dockerにmysqlをインストールした後にNavicatが接続できない問題に対する完璧な解決策

1. Dockerがイメージをプルするdocker pull mysql (デフォルトで最新バージョ...

ウェブデザインでは、まずウェブサイトの包括的なイメージの位置付けが必要です。

⑴ 内容によって形式が決まります。まず内容を充実させ、次にブロックに分割し、トーンを決め、最後に細部...

mysql5.7 以降で my.ini を設定するための詳細な手順

Windows 64 ビット版 MySQL 5.7 以降の解凍パッケージにデータディレクトリ、my-...

Zabbixについて管理者ログインパスワードを忘れた場合、パスワードをリセットする

Zabbix 管理者ログイン パスワードのリセットに関する問題は次のとおりです。 1. 問題の説明:...

react+reduxを使用してカウンター機能を実装すると発生する問題

Redux はシンプルな状態マネージャーです。その歴史をたどることはしません。使用法の観点から見ると...

Linux でジャンクファイルをエレガントに削除する方法

あなたも私と同じように、コンピューターのファイルを整然と整理し、不要なファイルを適宜削除するプログラ...