【React Native】はじめてのiOSアプリ開発

主題の通り、はじめてのiOSアプリ開発をReact Nativeでやってみました。 その時の開発メモです。

同じくReact Nativeを触ってみたい方への参考になればと。
ちょこちょこcoffee break(短い休憩)と所感入れてます😉

環境構築

Mac前提で進めます。

1) Xcodeのインストール

App Storeからインストール
iOSシミュレータはXcodeでインストールできる模様。

2) nodeとwatchmanのインストール

nodeは元々入れてたからwatchmanだけ追加でインストールしました。

brew install watchman

coffee breakと所感

Xcodeのインストール時間かかりすぎる。。これ必要な機能だけ部分的にインストールとかできるんかな?

3) iOSシミュレータのインストール

Xcodeメニュー -> Xcode -> Prefenrences -> Componentsからインストール。
僕の使用しているiOSが13.5.1だったので、とりあえず一番上のiOS 13.4 Simulatorをインストールしてみる。

f:id:natech12:20200614122448p:plain
Xcodeメニュー -> Xcode -> Preferences -> Components

coffee breakと所感

やっとXcodeインストール終わったと思ったら、今度はiOSシミュレータのインストールに時間がかかる。もう飽きてきた←

4) cocoapodsのインストール

ライブラリ管理ツールぽい?要るんかな。

sudo gem install cocoapods

React Nativeプロジェクトの作成

以下のコマンドで作成。最後のパラメータは任意のプロジェクト名。

npx react-native init demo_react_native

ただ僕はintellij ideaで開発したかったので、上記コマンドは使わず、ideaからプロジェクト作成。 微妙にコマンドのときと生成ファイルが違ったので、コマンドでプロジェクト作成した方は、以降の内容で辻褄合わないことあるかも。
ただ大差はないと思うので、良い感じに読み替えて貰えればと。

とりあえず実行

プロジェクトができたのでとりあえず実行してみる。
コマンドは以下。

npx react-native run-ios

Xcodeどこで使うんだろ?って思ったけど、なるほどここでシミュレータの起動時に使われるのか。 ターミナルみると、xcodebuildってのも使われてビルドしてるっぽい?

f:id:natech12:20200614130446p:plain
初めての起動

主なコンポーネント

  • View:コンテナ
  • Text:pタグ相当
  • Image:画像表示用
  • ScrollView:スクロール可能なコンテナ
  • TextInput:テキストフィールド
  • FlatList:ScrollViewと違って、今表示しているリスト分のみをレンダリングする(らしい。後で試す。)
  • SectionList:セクションごとにリストを渡せる(セクションごとにヘッダつけるときとか)

TODO

続きはまた今度。