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 をよろしくお願いいたします。

以下もご興味があるかもしれません: