はじめてのReactNative & styled-components

必要に迫られたのでReactNativeの導入のメモ

 

環境構築

 

Android

 

ここからandroid studioを導入します。

 

【参考】
[Android] Android Studio をMacにインストールする

 

環境変数を登録します。
android studioのメニューのTools>SDK Mangerの上のパスをコピーし、
~/.bashrcに以下の一行を記述。
export ANDROID_HOME=/Users/hogehoge/Library/Android/sdk

 

公式ページも参考にしつつ、Android6.0(Mashmallow)やsdk toolsの23.0.1などをインストールする。

 

その後、PATHを通す。

 

ターミナルを再起動して、$ adbを実行し、なんかいっぱい出たら成功。

 

まだ調べてないけど、Android用のエミュレータにGenymotionというのもあるらしい。

 

iOS

 

Xcodeのインストールとか。
特に何もしてません。

 

共通

 

watchmanはファイル監視ツールです。
$ brew install watchman

 

ReactNativeのインストールをします。
$ npm install -g react-native-cli

 

プロジェクトの作成をします。
$ react-native init hoge
$ cd hoge

 

実行

 

$ react-native run-android
もしくは
$ react-native run-ios
を実行するとエミュレータが起動します。

 

iosエミュレータ上でcmd+rを押すとリロードされ、アプリが起動します。

 

cmd+dでメニューが表示されるので、
「Enable Live Reload」を選択すると保存すると自動で更新されます。

 

ちなみにcmd-矢印でスマホを横向き表示にできたりします。

 

styled-componentsを導入する

 

styleには今まで通りstyled-componentsを採用します。
$ npm install styled-components --save-dev

 

本来のReactと少し異なるところはimportの際に
import styled from 'styled-components/native
というふうにnativeを付けます。

 

defaultのコードにstyled-componentsを追加してみました。

 

あとは、atomをReactNativeの環境構築などもしていきたいですね。

「はじめてのReactNative & styled-components」への2件のフィードバック

コメントを残す