はじめに
初めてReact Nativeでアプリを作るときのヒントをまとめた
一通りやると自分のスマートフォン上で開発したアプリを動かすことができる
React NativeはReact.jsでiOS, Androidアプリが作れるプラットフォームである
参考リンク
React Nativeとは何なのか
開発環境
OS:Mac=10.12.6(Sierra)
node=9.2.0
npm=5.5.1
react=16.0.0
react-native=23.0.0
expo=46.0.6
環境設定
まずnode.jsが入ってるかどうかを確認
バージョンが古い可能性があるので以下のコマンドでバージョンを安定版にする
npm install -g n
sudo n stable
React Native、expo(ビルドツール)をインストール
npm install -g create-react-native-app
npm install exp --global
それからスマホにExpo Clientというアプリをインストールする
このアプリ上で開発したアプリを実行する
Expo — Get Expo tools
参考リンク
Macにnode.jsをインストールする手順。
Getting Started · React Native
Expo — Learn how
実行
以下のコマンドでカレントディレクトリ下に開発プロジェクトを作成する
なおこのときアカウントを作り、プロジェクト名、テンプレを指定する必要がある
exp init AwesomeProject
(中略)
? Choose a project name: AwesomeProject
? Choose a template type: blank
プロジェクトディレクトリに移動しサーバを起動
cd AwesomeProject
exp start
これでサーバが立ち上がり、QRコードが表示される
Expo Clientを起動し「Scan QR Code」をタップ、QRコードを読み取るとサンプルアプリが起動する
これでApp.js
の<TEXT>
タグで囲まれてるテキストが画面に中央に表示されていれば成功!
サーバを起動したままApp.js
を編集して保存すると自動的にビルドがはじまる
とりあえず<TEXT>
タグで囲まれてるテキストを変更してみるとか、公式ドキュメントの「The Basics」のサンプルコード(例えばこれとか)
をマネするとかして色々試してみよう