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は機能ソリューション共有を作成できません

推薦する

MySQLの権限とインデックスの詳細な説明

mysql の権限とインデックスmysql の最高権限ユーザーは root です。 CREATE U...

Windows10 HomeバージョンにDockerをインストールするときに発生する問題の概要

Docker ダウンロード アドレス: http://get.daocloud.io/#instal...

シンプルな画像切り替えを実現するJavaScript

この記事では、JavaScriptで簡単な画像切り替えを実現するための具体的なコードを参考までに紹介...

MySQL学習データベース検索文DQL小百章

目次1. データの簡単な取得2. データの並べ替えと取得2.1. 基本構文2.2. ソート方向を指定...

支払いカウントダウンを実現し、ホームページに戻るためのjs

ホーム ページに戻るための支払いカウントダウン ケースの概要: シンプルな js 構文、getEle...

ウェブページの内部アンカーポイントを実現するための純粋なCSSの上下オフセットコード例

最近、「フットボール ナビゲーション」Web サイトに取り組んでいるときに、上部の固定ナビゲーション...

LinuxでifconfigとaddrがIPアドレスを表示できない問題を解決する

1. 仮想マシンにLinuxシステムをインストールし、仮想マシンを起動し、rootとパスワードを入力...

Node.jsを使用してホットリロードページを実装する方法の詳細な説明

序文少し前に、browser-sync+gulp+gulp-nodemon を組み合わせて、本番環境...

MySQLクエリで大文字と小文字を区別しない問題を解決する方法

質問最近、SSH フレームワークを使用して実用的なプロジェクトを完了していたときに、長い間悩まされて...

MySQL 8.0.16 winx64 のインストールと設定方法のグラフィックチュートリアル (win10 の場合)

この記事では、MySQL 8.0.16 winx64のインストールと設定の具体的な方法を記載します。...

JS ベースのページフローティングボックスを実装するためのサンプルコード

スクロール バーを下に引くと、主にposition:fixed;スタイルにより、フローティング ボッ...

Web ページのエンコーディングで gbk や gb2312 ではなく utf-8 が使用されるのはなぜですか?

選択肢がある場合は、UTF-8を使用することをお勧めします。実際、Windows システム自体のプロ...

jQuery キャンバスは QR コード付きのポスターを生成します

この記事では、jQuery キャンバスを使用して QR コード付きのポスターを生成するための具体的な...

Tomcat の 404 エラーの解決方法の詳細な説明

Tomcat テストで 404 問題が発生します。問題は次のとおりです。 HTTP ステータス 40...

MySQL複合インデックスの詳細な研究

複合インデックス (結合インデックスとも呼ばれます) は、複数の列に対して作成されるインデックスです...