AndroidとiOSとWebといちいち、Java、Swift、Html/JS/CSSを別々に書いていくのと、それぞれのプラットフォームに合ったいいアプリに出来るとは思うんだけど、プライベートではそんな時間はない！
というわけで、CordovaかReactNativeか迷ったのですが、Cordovaで開発したことあるので、今回はReactNativeで開発をしていこうと思いました。
その際のメモです。
Requirements
Install nvm
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 7731 100 7731 0 0 8287 0 --:--:-- --:--:-- --:--:-- 8286
=> Downloading nvm from git to '/Users/hogemi/.nvm'
=> Cloning into '/Users/hogrmi/.nvm'...
remote: Counting objects: 4197, done.
remote: Compressing objects: 100% (15/15), done.
remote: Total 4197 (delta 3), reused 0 (delta 0), pack-reused 4182
Receiving objects: 100% (4197/4197), 1.04 MiB | 548.00 KiB/s, done.
Resolving deltas: 100% (2441/2441), done.
Checking connectivity... done.
* (HEAD detached at v0.29.0)
master
=> Appending source string to /Users/hogemi/.zshrc
=> You currently have modules installed globally with `npm`. These will no
=> longer be linked to the active version of Node when you install a new node
=> with `nvm`; and they may (depending on how you construct your `$PATH`)
=> override the binaries of modules installed with `nvm`:
/usr/local/lib
├── bower@1.3.12
├── coffeelint@1.9.4
├── cordova@5.0.0
├── express-generator@4.12.1
├── generator-angular@0.11.1
├── generator-angular-famous-ionic@1.4.9
├── generator-aurelia@0.4.1
├── generator-ionic-gulp@1.1.2
├── generator-karma@0.9.0
├── generator-sublime@1.6.11
├── grunt-cli@0.1.13
├── gulp@3.9.0
├── ionic@1.5.5
├── ios-deploy@1.7.0
├── ios-sim@3.1.1
├── jspm@0.15.7
├── spawn-sync@1.0.11
├── supervisor@0.6.0
└── yo@1.4.7
=> If you wish to uninstall them at a later point (or re-install them under your
=> `nvm` Nodes), you can remove them from the system Node as follows:
$ nvm use system
$ npm uninstall -g a_module
=> Close and reopen your terminal to start using nvm
$ source ~/.zshrc
$ nvm
Node Version Manager
Note: <version> refers to any version-like string nvm understands. This includes:
- full or partial version numbers, starting with an optional "v" (0.10, v0.1.2, v1)
- default (built-in) aliases: node, stable, unstable, iojs, system
- custom aliases you define with `nvm alias foo`
Usage:
nvm help Show this message
nvm --version Print out the latest released version of nvm
nvm install [-s] <version> Download and install a <version>, [-s] from source. Uses .nvmrc if available
--reinstall-packages-from=<version> When installing, reinstall packages installed in <node|iojs|node version number>
nvm uninstall <version> Uninstall a version
nvm use [--silent] <version> Modify PATH to use <version>. Uses .nvmrc if available
nvm exec [--silent] <version> [<command>] Run <command> on <version>. Uses .nvmrc if available
nvm run [--silent] <version> [<args>] Run `node` on <version> with <args> as arguments. Uses .nvmrc if available
nvm current Display currently activated version
nvm ls List installed versions
nvm ls <version> List versions matching a given description
nvm ls-remote List remote versions available for install
nvm version <version> Resolve the given description to a single local version
nvm version-remote <version> Resolve the given description to a single remote version
nvm deactivate Undo effects of `nvm` on current shell
nvm alias [<pattern>] Show all aliases beginning with <pattern>
nvm alias <name> <version> Set an alias named <name> pointing to <version>
nvm unalias <name> Deletes the alias named <name>
nvm reinstall-packages <version> Reinstall global `npm` packages contained in <version> to current version
nvm unload Unload `nvm` from shell
nvm which [<version>] Display path to installed node version. Uses .nvmrc if available
Example:
nvm install v0.10.32 Install a specific version number
nvm use 0.10 Use the latest available 0.10.x release
nvm run 0.10.32 app.js Run app.js using node v0.10.32
nvm exec 0.10.32 node app.js Run `node app.js` with the PATH pointing to node v0.10.32
nvm alias default 0.10.32 Set default node version on a shell
Note:
to remove, delete, or uninstall nvm - just remove the `$NVM_DIR` folder (usually `~/.nvm`)
Install node
$ nvm install node && nvm alias default node
Downloading https://nodejs.org/dist/v5.3.0/node-v5.3.0-darwin-x64.tar.xz...
######################################################################## 100.0%
WARNING: checksums are currently disabled for node.js v4.0 and later
Now using node v5.3.0 (npm v3.3.12)
default -> node (-> v5.3.0)
check
$ npm -v
3.3.12
omg....
$ npm install -g npm@2
Install watchman
$ brew install watchman
==> Installing dependencies for watchman: pcre
==> Installing watchman dependency: pcre
==> Downloading https://homebrew.bintray.com/bottles/pcre-8.38.yosemite.bottle.tar.gz
######################################################################## 100.0%
==> Pouring pcre-8.38.yosemite.bottle.tar.gz
🍺 /usr/local/Cellar/pcre/8.38: 146 files, 5.9M
==> Installing watchman
==> Downloading https://homebrew.bintray.com/bottles/watchman-4.1.0.yosemite.bottle.tar.gz
######################################################################## 100.0%
==> Pouring watchman-4.1.0.yosemite.bottle.tar.gz
🍺 /usr/local/Cellar/watchman/4.1.0: 20 files, 316K
Install flow
$ brew install flow
==> Downloading https://homebrew.bintray.com/bottles/flow-0.19.1.yosemite.bottle.tar.gz
######################################################################## 100.0%
==> Pouring flow-0.19.1.yosemite.bottle.tar.gz
==> Caveats
Bash completion has been installed to:
/usr/local/etc/bash_completion.d
zsh completion has been installed to:
/usr/local/share/zsh/site-functions
==> Summary
🍺 /usr/local/Cellar/flow/0.19.1: 6 files, 6.0M
Set up
iOS
- need Xcode 7.0
Android
- read this
Install react-native-cli
$ npm install -g react-native-cli
/Users/hogemi/.nvm/versions/node/v5.3.0/bin/react-native -> /Users/hogemi/.nvm/versions/node/v5.3.0/lib/node_modules/react-native-cli/index.js
react-native-cli@0.1.7 /Users/hogemi/.nvm/versions/node/v5.3.0/lib/node_modules/react-native-cli
├── semver@5.1.0
├── chalk@1.1.1 (ansi-styles@2.1.0, supports-color@2.0.0, escape-string-regexp@1.0.4, has-ansi@2.0.0, strip-ansi@3.0.0)
└── prompt@0.2.14 (revalidator@0.1.8, pkginfo@0.3.1, read@1.0.7, winston@0.8.3, utile@0.2.1)
Quick Start
# at project root
$ react-native init testProject
This will walk you through creating a new React Native project in /Users/hogemi/workspace/react-native/test/testProject
Installing react-native package from npm...
Setting up new React Native app in /Users/hogemi/workspace/react-native/test/testProject
To run your app on iOS:
Open /Users/hogemi/workspace/react-native/test/testProject/ios/testProject.xcodeproj in Xcode
Hit the Run button
To run your app on Android:
Have an Android emulator running (quickest way to get started), or a device connected
cd /Users/hogemi/workspace/react-native/test/testProject
react-native run-android