【react-native】react-nativeをandroidに乗っけてみた

夏季休暇の間に学生のころからの付き合いであるY氏に

reactを教えてほしいと依頼が来た。

フレームワークは限りなくネイティブの見た目に近づけたいというこだわりがあった為

cordovaでなくreact-nativeでやりたいとのこと。

 

※react-nativeとは、javascriptを使ったモバイル開発向けのプラットフォームのこと。

react-nativeは名前の通りネイティブに必要な機能は一通りそろっているので機能を追加するのに楽といった

メリットがあります。(cordovaは必要な機能の都度プラグインを入れなければならず、バージョン管理や

カスタマイズの面で苦労させられた。)

 

reactの基礎は知っているもののcordovaでしかいじった経験がないのでまずは

いきなりがつがつ書かずにreact-nativeのインストールから始めましょう。

という訳でreact-nativeのインストール方法を紹介↓

①npm i node

②npm i watchman

③npm install -g react-native-cli

④react-native –versionでバージョン確認

⑤react-native init StampApp

⑥cd StampApp

⑦react-native run-android

緑文字でBUILD SUCCESSFULと出れば成功

 

ヘッダーに何パーセント読み込み中と出る(出るまでに時間がかかる)ので

それまで待つ。先述のとおりreact-nativeにはダイアログやカメラ機能といったネイティブの機能がデフォルトで

備わっており、それら全てをダウンロードしていると思うと合点がいく。

なお、初回以降は時間はかかりません。

最終的な画面は以下の通り

後はApp.jsでなにか適当にテキストをいじってreact-nativeの動きを試してみてください。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG