FC2ブログ

スマフォのアプリを作りたい(4):続・続React Native環境構築

   プログラミング [2019/12/26]
前回、あともうちょっとというところで、手持ちのタブレットPCのハードディスク容量不足に遭い、
AVD(Android Virtual Device)を起動するところまで行けませんでした。
どうするか悩んだ挙句、一旦インストールしたNode.js~Android Studioまで、思いつくところは全部アンインストールしました。

外付けのSSD-1Tを約6000円で購入。(割と安かった。)


◆Node.js~AVDまでおさらい的にやり直し
買った1Tの増設ディスク(SSD)をタブレットに接続して、
前々回「スマフォのアプリを作りたい(2):・・・」で説明した手順を再度実施。
当然、各インストーラで指定できるインストール先は、新たに増設したドライブD:に変更しながら行います。
※ただし、「npm install -g react-native-cli」は、デフォルトでC:ドライブにインストールされた。
そもそも-gというのが、グローバルの意味だそうで、予めnpmのインストール先に関連したデフォルトのフォルダにインストールされるようになっている模様。
変更を試みて、アンインストール「npm uninstall -g react-native-cli」して、-gのまま他のフォルダへのインストール方法を検索してみたが、よくわからず、面倒になったので断念した。
たぶん先にnpm自体のインストール先を変更するべきなのだと予想してます。
念のため、コマンドプロンプトで「npm list -g」、「set path」とかやって、react-native-cliがインストールされているか、「react-native.cmd」がある位置(npmのパス)にpath設定されているか確認しましょう。


AndroidStidioを起動して、AVDとHAXMをインストールする手順で、「SDK Component Setup」画面に辿りつけなかった。
もう、「済み」状態なのかもしれないので、そこは飛ばして、Android 6.0 SDKをインストールする手順を実施。
特にエラーもなく、あっさりインストールできた感じです。

前回「スマフォのアプリを作りたい(3):・・・」で説明した手順を再度実施。
[Android Studio]起動-[Configure]-[AVD Manager]と実施すると、前回とはちょっと違う画面が出ましたが、
その画面上の[Create Virtual Device..]をクリックします。「Select Hardware」画面が出ます。
以降の手順は、「スマフォのアプリを作りたい(3):・・・」と同じで、API Level23をサポートしているデバイスを選んで進めます。

仮想デバイスの追加が正常終了したようです。
以降、図の表示が小さくて見えない場合は、クリックすると文字が見える程度の画像で表示すると思います。
20191224_1.jpg

「Your Virtual Devises」ダイログでセットアップした構成のPlayボタンとおぼしき三角のアイコンをクリックすると・・・



「HAXMがインストールされていないけど、必須だよ。」的なメッセージが出た。
(やっぱりアンインストールした状態だったみたいです。)
20191224_2.jpg

[OK]を選択すると「Emulator Settings」ダイアログが表示されます。ディスク容量1G必要と出てます。[Next]を選択。
正常終了したようです。[Finish]を選択すると、AVDの起動が続行されました。

スマフォ風の画面が出ました!
20191224_3.jpg
※ちょっと画面のどこかを触っちゃったので初期のWelcome画面を録り逃してしまいました。

さて、ここまで来るのに過去3回の記事でボヤキ続けましたが、この先どうするのか、全く調べてませんでした。

以前、参考にさせてもらった以下のページにやり方が書かれてました。
★4:https://qiita.com/EBIHARA_kenji/items/2f6938c4fda7cecbeb19
真似してやってみます。

◆React Nativeのプロジェクトの作成
プロジェクトの作成は、コマンドプロンプトで「react-native.cmd init (プロジェクト名) --template typescript」とやるようです。
どこにプロジェクト関連の情報が作成されるのか、この時点で分からなかったので、念のため増設したドライブ下にフォルダを作成し、そこをカレントにした状態で、.cmdを実行してみた。
結果的にカレントフォルダ下に作成されたので、結論としては、

①コマンドプロンプトを起動する

②カレントをプロジェクトフォルダ作成先に移動する
 「cd (プロジェクト作成先フォルダのパス)」
 以下の例では、D:\AppMake\proj

③「react-native.cmd init (プロジェクト名) --template typescript」を実行する 
 以下の例ではVTChatというプロジェクト名を指定しています。



C:\WINDOWS\system32>d:
D:\>cd appmake\proj
D:\AppMake\proj>react-native.cmd init VTChat --template typescript
This will walk you through creating a new React Native project in D:\AppMake\proj\VTChat
'yarn' �́A����R�}���h�܂��͊O���R�}���h�A
����”\�ȃv���O�����܂��̓o�b�` �t�@�C���Ƃ��ĔF������Ă��܂���B
Installing react-native...
Consider installing yarn to make this faster: https://yarnpkg.com
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated core-js@1.2.7: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

> core-js@2.6.11 postinstall D:\AppMake\proj\VTChat\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN react-native@0.61.5 requires a peer of react@16.9.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ react-native@0.61.5
added 645 packages from 413 contributors and audited 66229 packages in 297.163s
found 4 low severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
info Setting up new React Native app in D:\AppMake\proj\VTChat
info Fetching template react-native-template-typescript...
npm WARN react-native@0.61.5 requires a peer of react@16.9.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ react-native-template-typescript@6.3.12
added 1 package from 1 contributor and audited 67219 packages in 29.151s
found 4 low severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
info Adding dependencies for the project...
info No additional dependencies.
info Adding develop dependencies for the project...
info No additional develop dependencies.
npm WARN deprecated left-pad@1.3.0: use String.prototype.padStart()
npm WARN @typescript-eslint/eslint-plugin@1.13.0 requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @typescript-eslint/parser@1.13.0 requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-plugin-react@7.12.4 requires a peer of eslint@^3.0.0 || ^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-plugin-react-native@3.6.0 requires a peer of eslint@^3.17.0 || ^4 || ^5 but none is installed. You must install peer dependencies yourself.
npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 293 packages from 274 contributors, removed 1 package and audited 952647 packages in 127.281s
found 4 low severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
info Adding required dependencies
npm WARN @typescript-eslint/eslint-plugin@1.13.0 requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @typescript-eslint/parser@1.13.0 requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-plugin-react@7.12.4 requires a peer of eslint@^3.0.0 || ^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-plugin-react-native@3.6.0 requires a peer of eslint@^3.17.0 || ^4 || ^5 but none is installed. You must install peer dependencies yourself.
npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ react@16.9.0
updated 1 package and audited 952647 packages in 49.704s
found 4 low severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
info Adding required dev dependencies
npm WARN deprecated left-pad@1.3.0: use String.prototype.padStart()
npm WARN eslint-plugin-react@7.12.4 requires a peer of eslint@^3.0.0 || ^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @typescript-eslint/eslint-plugin@1.13.0 requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-plugin-react-native@3.6.0 requires a peer of eslint@^3.17.0 || ^4 || ^5 but none is installed. You must install peer dependencies yourself.
npm WARN @typescript-eslint/parser@1.13.0 requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @react-native-community/eslint-config@0.0.5
+ babel-jest@24.9.0
+ react-test-renderer@16.9.0
+ jest@24.9.0
+ @babel/runtime@7.7.7
+ @babel/core@7.7.7
+ eslint@6.8.0
+ metro-react-native-babel-preset@0.56.3
updated 8 packages and audited 952647 packages in 73.201s
found 4 low severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details

Run instructions for iOS:
• cd D:\AppMake\proj\VTChat && npx react-native run-ios
- or -
• Open VTChat\ios\VTChat.xcodeproj in Xcode or run "xed -b ios"
• Hit the Run button

Run instructions for Android:
• Have an Android emulator running (quickest way to get started), or a device connected.
• cd D:\AppMake\proj\VTChat && npx react-native run-android


文字化けしたメッセージや、ワーニングが出たので、少々ドキッとしたが、うまく行った感じです。
細かいことは気にしません。

作成されたプロジェクトのフォルダ内を確認してみます。
20191224_4.jpg
予想以上にアイテムが多い(煩雑)印象です。何か何やら皆目見当がつかない。


◆エミュレータを起動する
★4ページによるとAndroidStudio経由でエミュレータを起動するのは面倒なので、.batを作成するように推奨されてたので、真似してみます。ただし、ちょっと書いてある通りにやってもうまく行かなかったので、ここで訂正させていただきます。
訂正).batの内容は、「(AndroidSdkインストール先)\tools\emulator.exe -avd (デバイス名)」の1行のでOK。

開いたコマンドプロンプト上から起動コマンドを最初に実行した際には、以下のメッセージが出ました。
----------------------------------------------
D:\AppMake\proj>D:\appmake\android\sdk\tools\emulator.exe -avd myNexusS
ANGLE: D3D11: rx::Renderer11::generateConfigs
emulator: ERROR: AdbHostServer.cpp:102: Unable to connect to adb daemon on port: 5037
Failed to open /usr/local/google/home/joshuaduong/emu/master/prebuilts/android-emulator-build/qemu-android-deps/windows_msvc-x86_64/qemu.conf, err: 2
HAX is working and emulator runs in fast virt mode.
dsound: Could not initialize DirectSound
dsound: Reason: No sound driver is available for use, or the given GUID is not a valid DirectSound device ID
audio: Could not init `dsound' audio driver
checkValid: hw configs not eq
Your emulator is out of date, please update by launching Android Studio:
- Start Android Studio
- Select menu "Tools > Android > SDK Manager"
- Click "SDK Tools" tab
- Check "Android Emulator" checkbox
- Click "OK"

emulator: INFO: QtLogger.cpp:68: Critical: UpdateLayeredWindowIndirect failed for ptDst=(694, 126), size=(300x21), dirty=(300x21 0, 0) (システムに接続されたデバイスが機能していません。) ((null):0, (null))

emulator: Saving state on exit with session uptime 996249 ms
emulator: INFO: QtLogger.cpp:68: Critical: Uncaught TypeError: Cannot read property 'update' of undefined (qrc:/html/js/location-mock-web-channel.js:130, (null))
----------------------------------------------

さらに以下メッセージも。
20191224_5.jpg
なんか古いからアップデートしなはれと言っているようです。
必要になったら後でね。

バッチ(.bat)を作成作成して2度目の起動時は、「checkValid: hw・・・」以降のメッセージは出ませんでした。
ちなみに、エミュレータの終了は、スマフォ状の画面の右側に出るアイコン列ウィンドウの右上の「×」で出来ます。

次行きます。


◆React Nativeのプロジェクトの実行
★4ページの説明だとVisualStudio Codeを使用する例が説明されていますが、VS Codeは入れてない状態です。
他の例/説明を探しました。
以下のサイトが検索の先頭に来ました。
★5:http://inaz2.hatenablog.com/entry/2016/04/17/081853
ビルドの意味なんでしょうか「react-native start」と、実行の意味なんでしょうか「react-native run-android」とやるみたいです。
上記の対象はカレントフォルダのプロジェクトになるようなので、実行前にカレントを移動します。

最初コマンドを実行するとエラーになりました。
----------------------------------------------
D:\AppMake\proj\VTChat>react-native start
error Invalid regular expression: /(.*\\__fixtures__\\.*|node_modules[\\\]react[\\\]dist[\\\].*|website\\node_modules\\.*|heapCapture\\bundle\.js|.*\\__tests__\\.*)$/: Unterminated character class. Run CLI with --verbose flag for more details.
SyntaxError: Invalid regular expression: /(.*\\__fixtures__\\.*|node_modules[\\\]react[\\\]dist[\\\].*|website\\node_modules\\.*|heapCapture\\bundle\.js|.*\\__tests__\\.*)$/: Unterminated character class
at new RegExp ()
at blacklist (D:\AppMake\proj\VTChat\node_modules\metro-config\src\defaults\blacklist.js:34:10)
at getBlacklistRE (D:\AppMake\proj\VTChat\node_modules\react-native\node_modules\@react-native-community\cli\build\tools\loadMetroConfig.js:66:59)
at getDefaultConfig (D:\AppMake\proj\VTChat\node_modules\react-native\node_modules\@react-native-community\cli\build\tools\loadMetroConfig.js:82:20)
at load (D:\AppMake\proj\VTChat\node_modules\react-native\node_modules\@react-native-community\cli\build\tools\loadMetroConfig.js:118:25)
at Object.runServer [as func] (D:\AppMake\proj\VTChat\node_modules\react-native\node_modules\@react-native-community\cli\build\commands\server\runServer.js:82:58)
at Command.handleAction (D:\AppMake\proj\VTChat\node_modules\react-native\node_modules\@react-native-community\cli\build\index.js:164:23)
at Command.listener (D:\AppMake\proj\VTChat\node_modules\commander\index.js:315:8)
at Command.emit (events.js:210:5)
at Command.parseArgs (D:\AppMake\proj\VTChat\node_modules\commander\index.js:651:12)
----------------------------------------------

上記を放置して、2番目のコマンドを実行すると最終的にエミュレータ上に以下のようなメッセージが表示されました。
20191224_6.jpg

「start」をチャンとやれよ! と出てます。

納得いかない感じもしましたが、最初のエラーの原因を探しに行きました。
「SyntaxError: Invalid regular expression: /(.*\\__fixtures__\\」を検索キーにしてぐぐったら、
プロジェクト内の.jsを修正すると解決するようなことが書いてありました。

(プロジェクトフォルダのパス)\node_modules\metro-config\src\defaults\blacklist.js
----------------------------------------------
【変更前】
var sharedBlacklist = [
/node_modules[/\\]react[/\\]dist[/\\].*/,
/website\/node_modules\/.*/,
/heapCapture\/bundle\.js/,
/.*\/__tests__\/.*/
];

【変更後】
var sharedBlacklist = [
/node_modules[\/\\]react[\/\\]dist[\/\\].*/,
/website\/node_modules\/.*/,
/heapCapture\/bundle\.js/,
/.*\/__tests__\/.*/
];
----------------------------------------------

2行目の各「/\\」を「\/\\」に修正するという内容です。

「ホントかよ」と思いながら、修正して、「react-native start」を再度実行してみると今度は、何もメッセージを出さずに終わった。それはそれで、成否が曖昧で不安になります。

ともかく、2つ目のコマンド「react-native run-android」を実行してみます。
実行すると、新たにコマンドプロンプト画面が2つ起動されます。

合計3つのプロンプトウィンドウのタイトルバーの記述は、
・「管理者:コマンドプロンプト - react-native run-android」
・「選択node "(プロジェクトフォルダのパス)\node-modules\react-native\scripts\..\cli.js" start」
・「選択(Android Sdkフォルダのパス)\emulator\qemu\windows-x86_64\qemu-system-i368.exe」
となってます。
途中以下のアラートも出ます。
20191224_7.jpg
テンプレートとしてセットされてるスクリプトが何をするようになっているのか分からないので仕方なくそのまま許可します。

時間は掛かりますが、起動していたエミュレータの画面の内容が変わります。
20191224_8.jpg
残念ながら再度エラーです。

----------------------------------------------
┌───────────────────────────────────────┐
│ Running Metro Bundler on port 8081.                │
│ Keep Metro running while developing on any JS projects. Feel free to           │
│ close this tab and run your own Metro instance if you prefer.              │
│ https://github.com/facebook/react-native               │
└───────────────────────────────────────┘
Looking for JS files in
D:\AppMake\proj\VTChat
Loading dependency graph...jest-haste-map: Haste module naming collision: VTChat
The following files share their name; please adjust your hasteImpl:
* \package.json
* \template\package.json
Failed to construct transformer: DuplicateError: Duplicated files or mocks. Please check the console for more info
at setModule (D:\AppMake\proj\VTChat\node_modules\jest-haste-map\build\index.js:620:17)
at workerReply (D:\AppMake\proj\VTChat\node_modules\jest-haste-map\build\index.js:691:9)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async Promise.all (index 16) {
mockPath1: 'package.json',
mockPath2: 'template\\package.json'
}
(node:7316) UnhandledPromiseRejectionWarning: Error: Duplicated files or mocks. Please check the console for more info
:
:
----------------------------------------------


おお元のプロンプトでは以下のメッセージ
----------------------------------------------
D:\AppMake\proj\VTChat>react-native run-android
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 864 file(s) to forward-jetify. Using 4 workers...
info Starting JS server...
* daemon not running; starting now at tcp:5037
* daemon started successfully
info Launching emulator...
info Successfully launched emulator.
Starting a Gradle Daemon, 1 incompatible and 1 stopped Daemons could not be reused, use --status for details

> Task :app:installDebug
03:39:40 V/ddms: execute: running am get-config


03:39:56 V/ddms: execute 'rm "/data/local/tmp/app-debug.apk"' on 'emulator-5554' : EOF hit. Read: -1
03:39:56 V/ddms: execute: returning
Installed on 1 device.

Deprecated Gradle features were used in this build, making it incompatible with Gradle 6.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/5.5/userguide/command_line_interface.html#sec:command_line_warnings

BUILD SUCCESSFUL in 4m 6s
27 actionable tasks: 3 executed, 24 up-to-date
info Connecting to the development server...
info Starting the app on "emulator-5554"...
Starting: Intent { cmp=com.vtchat/.MainActivity }
----------------------------------------------



「選択node・・・」側のメッセージだと「package.jsonというのが、2か所あって衝突してるよ!」と言ってる感じです。
ちなみに、2つのpackage.jsonの中身は違ってました。

「Failed to construct transformer: DuplicateError: Duplicated files or mocks.」で検索したらいくつか事例と対策方法が説明されていました。
類似な感じの多かった説明だと、
【原因】プロジェクトフォルダ内に別のプロジェクトを作成すると起きる
 ・・・>そんなことしてません。
【対策】Androidの場合はandroid/buildを削除してもう一回run-androidしろ、iOSの場合はios/buildとios/Podsを削除してPodを再インストールしろ みたいな
 ・・・>android/buildってどこのフォルダ? Windows版の環境だと(プロジェクトフォルダのパス)\android\app\buildなのかな?

どうも、しっくり来ない気がしたので、以下のサイトの対策を試しました。
https://aknow2.hatenablog.com/entry/2018/11/08/095822
が、解決しませんでした。再度調べて、
https://stackoverflow.com/questions/41813211/how-to-make-react-native-packager-ignore-certain-directories
によると、どうもrn-cli.config.jsというファイルはReactNativeの過去のVer(<0.59)用の設定ファイルだそうです。
なので、プロジェクトフォルダ直下に作成されているmetro.config.jsを編集して、以下の記述を追加してみた。
----------------------------------------------
// BLACKLIST for DuplicateError of Metro Bundler
const blacklist = require('metro-config/src/defaults/blacklist');

// blacklist is a function that takes an array of regexes and combines
// them with the default blacklist to return a single regex.

module.exports = {
resolver: {
blacklistRE: blacklist([/template\/.*/])
}
};

----------------------------------------------

これで解決しました。

ちなみに、rn-cli.config.jsが有効じゃないと分かるまでに試して分かったことを以下に。
・「react-native start」を実行すると
 「選択node ・・・ start」プロンプトと同じメッセージが出る。
・このstartプロンプトが起動されていない状態で「・・・run-android」すると
 startプロセスは起動される。
・AVDエミュレータを起動していない状態でも「・・・run-android」とやると
 エミュレータが起動される。
・「・・・start」はエラー表示してもプロンプトに簡単に戻って来ない。
 そのときは[Ctrl]+[C]で強制終了できる。
・package.jsのDuplicateErrorは
 template\package.jsをリネームするだけでも発生しなくなる。
・Metroって何?・・・ソースコードの差分を見張って更新時に端末側に送り込んでくれるもの?
 分かったような分かんない説明ですが、同じファイル名があると混乱するんですね。

正常に動作した場合の各画面の内容は以下な感じです。
・「管理者:コマンドプロンプト - react-native run-android」

C:\WINDOWS\system32>d:
D:\>cd appmake\proj\vtchat
D:\AppMake\proj\VTChat>react-native run-android
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 864 file(s) to forward-jetify. Using 4 workers...
info JS server already running.
info Launching emulator...
info Successfully launched emulator.
info Installing the app...

> Task :app:installDebug
02:05:12 V/ddms: execute: running am get-config
02:05:13 V/ddms: execute 'am get-config' on 'emulator-5554' : EOF hit. Read: -1
02:05:13 V/ddms: execute: returning
Installing APK 'app-debug.apk' on 'myNexusS(AVD) - 6.0' for app:debug
02:05:13 D/app-debug.apk: Uploading app-debug.apk onto device 'emulator-5554'
02:05:13 D/Device: Uploading file onto device 'emulator-5554'
02:05:13 D/ddms: Reading file permision of D:\AppMake\proj\VTChat\android\app\build\outputs\apk\debug\app-debug.apk as: rwx------
02:05:14 V/ddms: execute: running pm install -r -t "/data/local/tmp/app-debug.apk"
02:05:34 V/ddms: execute 'pm install -r -t "/data/local/tmp/app-debug.apk"' on 'emulator-5554' : EOF hit. Read: -1
02:05:34 V/ddms: execute: returning
02:05:34 V/ddms: execute: running rm "/data/local/tmp/app-debug.apk"
02:05:35 V/ddms: execute 'rm "/data/local/tmp/app-debug.apk"' on 'emulator-5554' : EOF hit. Read: -1
02:05:35 V/ddms: execute: returning
Installed on 1 device.

Deprecated Gradle features were used in this build, making it incompatible with Gradle 6.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/5.5/userguide/command_line_interface.html#sec:command_line_warnings

BUILD SUCCESSFUL in 1m 41s
27 actionable tasks: 2 executed, 25 up-to-date
info Connecting to the development server...
info Starting the app on "emulator-5554"...
Starting: Intent { cmp=com.vtchat/.MainActivity }


・「選択node ・・・ start」
----------------------------------------------
D:\AppMake\proj\VTChat>react-native start
┌───────────────────────────────────────┐
│ Running Metro Bundler on port 8081. │
│ Keep Metro running while developing on any JS projects. Feel free to │
│ close this tab and run your own Metro instance if you prefer. │
│ https://github.com/facebook/react-native │
└───────────────────────────────────────┘
Looking for JS files in
D:\AppMake\proj\VTChat

Loading dependency graph, done.
BUNDLE [android, dev] ./index.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 100.0% (457/457), done.

LOG Running "VTChat" with {"rootTag":1}
----------------------------------------------


・エミュレータ
20191224_9.jpg

さて、この絵を出しているソースはどこで、
この先どうやってデバッグするんだろ?
JavaScriptもホントのところ、よくワカんないし。


この先、まだまだ長そうなので、ここで一旦話を切ります。

では、続きは、また何れ。
m(__)m

スポンサーサイト





コメントの投稿

非公開コメント

カレンダー
01 | 2024/02 | 03
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 - -
プロフィール

さるもすなる

Author:さるもすなる
さるです。別HPサイト「さるもすなる」から侵食してきました。 山菜/きのこ、それとタイトルにしたPPバンド籠のことをメインに徒然に・・・・暇を持て余したさるの手仕事:男手芸のブログってことで。

最新記事
最新コメント
月別アーカイブ
カテゴリ
天気予報

-天気予報コム- -FC2-
本家のHPのトップ
山菜や茸の話です
PPバンドの籠作品と作り方です
投稿をお待ちしております



PVアクセスランキング にほんブログ村 にほんブログ村 ハンドメイドブログへ



マニュアルのお申し込み



検索フォーム
リンク
RSSリンクの表示
ブロとも申請フォーム

この人とブロともになる

QRコード
QR