More than 5 years have passed since last update.

2019年度下期 React Nativeでアプリ作る③

Last updated at 2020-01-13Posted at 2020-01-13

■ はじめに

前回に続き、React Nativeでアプリを作る。
前回：https://qiita.com/satosingo5/items/eae80242c4e79e8388d0

今回やること
・固めてスマホに突っ込む（ビルドしてAndroid実機にインストールする）
　－前回作ったハロワアプリをビルド。
　－ビルド後はapk形式でローカルに保存。
　－apkを使用し、Android実機にインストールする。

apkを使用したインストールについては以下を参照。
https://smartasw.com/archives/android8-1%EF%BD%9Eandroid4-0%E3%81%AE%E7%AB%AF%E6%9C%AB%E3%81%AB%E3%80%8C%E9%87%8E%E8%89%AF%E3%82%A2%E3%83%97%E3%83%AA%EF%BC%88-apk%EF%BC%89%E3%80%8D%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88.html#toc7

■ ビルド準備

今回も先人の記事を参考にする。
https://qiita.com/hitotch/items/04637fb753482ed683ee

※後日追記：参考にした記事中にWSLを使用できるようにしているが、実際に操作しなくても問題なく実機のインストールまでできた。
なお、私の環境にはもともとWSLの環境はあったので、WSLが不要かどうかまでは確認できていない。WSLの手順を省略する際はご留意を。

まず、ビルドするにはExpoアカウントが必要らしい。
なんでもExpoサーバ側でビルドしてくれるみたい。

また、expo-cliのインストールも必要。

早速コマンドたたいてインストールしようとしたらエラー発生。
例によってバージョンを下げる作戦を決行。

https://nodejs.org/download/release/v10.16.3/
node-v10.16.3-x64.msiをクリックし、10.16.3のwindows向けのインストーラをダウンロードする。

Next連打してインストール。

expo-cliのインストールに再挑戦。念のため管理者権限でcmdを実行しておく。
↓npm install expo-cli --globalを実行。警告は出ているが順調にすすむ。

ダメでした。

エラーの出てるパスをたどってみる。

ん？タイムスタンプが1月１日？

あ～初回の環境構築時に入れてましたね。

2019年度下期 React Nativeでアプリ作る①
■ Node.js他もろもろの導入
Python導入後

と言うことは、あとはビルドコマンドたたけばいいだけなのでは。

■ ビルドする

ビルドしますよ。
パブリッシュとかいうのもあるらしいけど、前回使用したExpo公式のクライアントアプリを介して、ほかのユーザが見れるようにするためのものらしい。
オフラインで使用するためにはやはりビルドが必要。

以下の画像のとおり、ビルドを開始する。

ドキドキして待っていたが、ログイン待ちだった。

カーソル動かしてログインをする。

ログインはできたが、エラー発生。

app.jsonにAndroidのパッケージの設定せんかいみたいなエラー？

ひとまず適当に設定（29行目）。

ダメみたいですね。

「.」とかつけろって言われてるようなので「.」をつけた。

再チャレンジ。なんか進んだ。

google先生に訳してもらう。

お任せにする！:)

なんでこうも進まないのか。

app.jsonの5行目を勝手にprivateにしてたからですね。publicに修正。

再チャレンジ。もちろんお任せで。

お？

これは参考にした記事内に回避策が乗っていたのでそれを実施。
https://qiita.com/hitotch/items/04637fb753482ed683ee#%E3%83%93%E3%83%AB%E3%83%89%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E5%87%BA%E3%82%8B%E5%A0%B4%E5%90%88