LoginSignup
7
8

More than 5 years have passed since last update.

React Nativeチュートリアル

Posted at

はじめに

初めて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」のサンプルコード(例えばこれとか)
をマネするとかして色々試してみよう

7
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
8