読者です 読者をやめる 読者になる 読者になる

IT練習ノート

IT関連で調べたこと(実際は嵌ったこと)を書いています。

reactnative事始め

reactnative

インストールは下記のURLの通り進めれば良い。

https://facebook.github.io/react-native/docs/getting-started.html#content

Node.jsのインストール

MacBook-Air:testnode foo$ nodebrew use v7.0.0
use v7.0.0
(root)MacBook-Air:testnode foo$ node -v
v7.0.0

ファイル監視モジュールのインストール

MacBook-Air:testreact foo$ 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: 203 files, 5.4M
==> Installing watchman
==> Downloading https://homebrew.bintray.com/bottles/watchman-4.5.0.yosemite.bottle.tar.gz
######################################################################## 100.0%
==> Pouring watchman-4.5.0.yosemite.bottle.tar.gz

react-nativeのインストール gオプションをつけないと下記のエラーとなる。

t)MacBook-Air:testreact foo$ npm install react-native-cli
/Users/foo/js/testreact
└─┬ react-native-cli@1.0.0 

途中省略

  │   ├── pkginfo@0.3.1 
  │   └── stack-trace@0.0.9 
  └── semver@5.3.0 

npm WARN enoent ENOENT: no such file or directory, open '/Users/foo/js/testreact/package.json'
npm WARN testreact No description
npm WARN testreact No repository field.
npm WARN testreact No README data
npm WARN testreact No license field.

gオプションをつけてreact-nativeをインストール

t)MacBook-Air:testreact foo$ npm install -g react-native-cli
/Users/foo/.nodebrew/node/v7.0.0/bin/react-native -> /Users/foo/.nodebrew/node/v7.0.0/lib/node_modules/react-native-cli/index.js
/Users/foo/.nodebrew/node/v7.0.0/lib
└─┬ react-native-cli@1.0.0 
  ├─┬ chalk@1.1.3 
  │ ├── ansi-styles@2.2.1 
  │ ├── escape-string-regexp@1.0.5 
  │ ├─┬ has-ansi@2.0.0 
  │ │ └── ansi-regex@2.0.0 
  │ ├── strip-ansi@3.0.1 
  │ └── supports-color@2.0.0 
  ├── minimist@1.2.0 
  ├─┬ prompt@0.2.14 
  │ ├── pkginfo@0.4.0 
  │ ├─┬ read@1.0.7 
  │ │ └── mute-stream@0.0.6 
  │ ├── revalidator@0.1.8 
  │ ├─┬ utile@0.2.1 
  │ │ ├── async@0.2.10 
  │ │ ├── deep-equal@1.0.1 
  │ │ ├── i@0.3.5 
  │ │ ├─┬ mkdirp@0.5.1 
  │ │ │ └── minimist@0.0.8 
  │ │ ├── ncp@0.4.2 
  │ │ └─┬ rimraf@2.5.4 
  │ │   └─┬ glob@7.1.1 
  │ │     ├── fs.realpath@1.0.0 
  │ │     ├─┬ inflight@1.0.6 
  │ │     │ └── wrappy@1.0.2 
  │ │     ├── inherits@2.0.3 
  │ │     ├─┬ minimatch@3.0.3 
  │ │     │ └─┬ brace-expansion@1.1.6 
  │ │     │   ├── balanced-match@0.4.2 
  │ │     │   └── concat-map@0.0.1 
  │ │     ├── once@1.4.0 
  │ │     └── path-is-absolute@1.0.1 
  │ └─┬ winston@0.8.3 
  │   ├── colors@0.6.2 
  │   ├── cycle@1.0.3 
  │   ├── eyes@0.1.8 
  │   ├── isstream@0.1.2 
  │   ├── pkginfo@0.3.1 
  │   └── stack-trace@0.0.9 
  └── semver@5.3.0 

プロジェクトを作成する。

(root)MacBook-Air:testreact foo$ react-native init AwesomeProject
This will walk you through creating a new React Native project in /Users/foo/js/testreact/AwesomeProject
Installing react-native package from npm...
Setting up new React Native app in /Users/foo/js/testreact/AwesomeProject

npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN prefer global marked@0.3.6 should be installed with -g
AwesomeProject@0.0.1 /Users/foo/js/testreact/AwesomeProject
├─┬ babel-jest@16.0.0 
│ ├─┬ babel-plugin-istanbul@2.0.3 
│ │ ├── istanbul-lib-instrument@1.2.0 
│ │ └─┬ test-exclude@2.1.3 
│ │   └── require-main-filename@1.0.1 
│ └─┬ babel-preset-jest@16.0.0 
│   └── babel-plugin-jest-hoist@16.0.0 
├── babel-preset-react-native@1.9.0 
├─┬ jest@16.0.2 
│ └─┬ jest-cli@16.0.2 
│   ├── callsites@2.0.0 
│   ├─┬ is-ci@1.0.10 
│   │ └── ci-info@1.0.0 
│   ├─┬ istanbul-api@1.0.0-aplha.10 
│   │ ├── async@1.5.2 
│   │ ├─┬ fileset@0.2.1 
│   │ │ └── minimatch@2.0.10 
│   │ ├─┬ istanbul-lib-hook@1.0.0-alpha.4 
│   │ │ └── append-transform@0.3.0 
│   │ ├─┬ istanbul-lib-report@1.0.0-alpha.3 
│   │ │ ├── async@1.5.2 
│   │ │ ├── path-parse@1.0.5 
│   │ │ └─┬ supports-color@3.1.2 
│   │ │   └── has-flag@1.0.0 
│   │ ├── istanbul-lib-source-maps@1.0.2 
│   │ ├─┬ istanbul-reports@1.0.0 
│   │ │ └─┬ handlebars@4.0.5 
│   │ │   ├── async@1.5.2 
│   │ │   └── source-map@0.4.4 
│   │ └─┬ js-yaml@3.6.1 
│   │   ├── argparse@1.0.9 
│   │   └── esprima@2.7.3 
│   ├── istanbul-lib-coverage@1.0.0 
│   ├── jest-changed-files@16.0.0 
│   ├─┬ jest-config@16.0.2 
│   │ ├─┬ istanbul@0.4.5 
│   │ │ ├── async@1.5.2 
│   │ │ ├── esprima@2.7.3 
│   │ │ └── supports-color@3.1.2 
│   │ └── jest-environment-node@16.0.2 
│   ├─┬ jest-environment-jsdom@16.0.2 
│   │ └─┬ jsdom@9.8.3 
│   │   ├── abab@1.0.3 
│   │   ├── acorn@2.7.0 
│   │   ├─┬ acorn-globals@1.0.9 
│   │   │ └── acorn@2.7.0 
│   │   ├── array-equal@1.0.0 
│   │   ├── content-type-parser@1.0.1 
│   │   ├── cssom@0.3.1 
│   │   ├── cssstyle@0.2.37 
│   │   ├── html-encoding-sniffer@1.0.1 
│   │   ├── iconv-lite@0.4.13 
│   │   ├── nwmatcher@1.3.9 
│   │   ├── parse5@1.5.1 
│   │   ├─┬ request@2.76.0 
│   │   │ ├── aws-sign2@0.6.0 
│   │   │ ├── aws4@1.5.0 
│   │   │ ├── caseless@0.11.0 
│   │   │ ├─┬ combined-stream@1.0.5 
│   │   │ │ └── delayed-stream@1.0.0 
│   │   │ ├── forever-agent@0.6.1 
│   │   │ ├─┬ form-data@2.1.1 
│   │   │ │ ├── asynckit@0.4.0 
│   │   │ │ └─┬ mime-types@2.1.12 
│   │   │ │   └── mime-db@1.24.0 
│   │   │ ├─┬ har-validator@2.0.6 
│   │   │ │ └─┬ is-my-json-valid@2.15.0 
│   │   │ │   ├── generate-function@2.0.0 
│   │   │ │   ├─┬ generate-object-property@1.2.0 
│   │   │ │   │ └── is-property@1.0.2 
│   │   │ │   └── jsonpointer@4.0.0 
│   │   │ ├─┬ hawk@3.1.3 
│   │   │ │ ├── boom@2.10.1 
│   │   │ │ ├── cryptiles@2.0.5 
│   │   │ │ └── sntp@1.0.9 
│   │   │ ├─┬ http-signature@1.1.1 
│   │   │ │ ├── assert-plus@0.2.0 
│   │   │ │ ├─┬ jsprim@1.3.1 
│   │   │ │ │ ├── extsprintf@1.0.2 
│   │   │ │ │ ├── json-schema@0.2.3 
│   │   │ │ │ └── verror@1.3.6 
│   │   │ │ └─┬ sshpk@1.10.1 
│   │   │ │   ├── asn1@0.2.3 
│   │   │ │   ├── assert-plus@1.0.0 
│   │   │ │   ├── bcrypt-pbkdf@1.0.0 
│   │   │ │   ├─┬ dashdash@1.14.0 
│   │   │ │   │ └── assert-plus@1.0.0 
│   │   │ │   ├── ecc-jsbn@0.1.1 
│   │   │ │   ├─┬ getpass@0.1.6 
│   │   │ │   │ └── assert-plus@1.0.0 
│   │   │ │   ├── jodid25519@1.0.2 
│   │   │ │   ├── jsbn@0.1.0 
│   │   │ │   └── tweetnacl@0.14.3 
│   │   │ ├── is-typedarray@1.0.0 
│   │   │ ├── isstream@0.1.2 
│   │   │ ├── json-stringify-safe@5.0.1 
│   │   │ ├── oauth-sign@0.8.2 
│   │   │ ├── qs@6.3.0 
│   │   │ └── stringstream@0.0.5 
│   │   ├── symbol-tree@3.1.4 
│   │   ├─┬ tough-cookie@2.3.2 
│   │   │ └── punycode@1.4.1 
│   │   ├── webidl-conversions@3.0.1 
│   │   ├─┬ whatwg-encoding@1.0.1 
│   │   │ └── iconv-lite@0.4.13 
│   │   ├─┬ whatwg-url@3.0.0 
│   │   │ └── tr46@0.0.3 
│   │   └── xml-name-validator@2.0.1 
│   ├── jest-file-exists@15.0.0 
│   ├── jest-haste-map@16.0.2 
│   ├─┬ jest-jasmine2@16.0.2 
│   │ ├─┬ jasmine-check@0.1.5 
│   │ │ └── testcheck@0.1.4 
│   │ └── jest-matchers@16.0.2 
│   ├── jest-mock@16.0.2 
│   ├─┬ jest-resolve@16.0.2 
│   │ └── jest-haste-map@16.0.2 
│   ├── jest-resolve-dependencies@16.0.2 
│   ├─┬ jest-runtime@16.0.2 
│   │ ├── jest-haste-map@16.0.2 
│   │ └─┬ yargs@5.0.0 
│   │   ├── cliui@3.2.0 
│   │   └── window-size@0.2.0 
│   ├─┬ jest-snapshot@16.0.2 
│   │ ├─┬ jest-diff@16.0.0 
│   │ │ └── diff@3.0.1 
│   │ ├── jest-matcher-utils@16.0.0 
│   │ ├── natural-compare@1.4.0 
│   │ └── pretty-format@4.2.1 
│   ├─┬ jest-util@16.0.2 
│   │ └── diff@3.0.1 
│   ├─┬ node-notifier@4.6.1 
│   │ ├─┬ cli-usage@0.1.4 
│   │ │ ├── marked@0.3.6 
│   │ │ └─┬ marked-terminal@1.7.0 
│   │ │   ├─┬ cardinal@1.0.0 
│   │ │   │ ├── ansicolors@0.2.1 
│   │ │   │ └─┬ redeyed@1.0.1 
│   │ │   │   └── esprima@3.0.0 
│   │ │   └─┬ node-emoji@1.4.1 
│   │ │     └── string.prototype.codepointat@0.2.0 
│   │ ├── growly@1.3.0 
│   │ ├─┬ lodash.clonedeep@3.0.2 
│   │ │ ├─┬ lodash._baseclone@3.3.0 
│   │ │ │ ├── lodash._arraycopy@3.0.0 
│   │ │ │ ├── lodash._arrayeach@3.0.0 
│   │ │ │ ├── lodash._baseassign@3.2.0 
│   │ │ │ └── lodash._basefor@3.0.3 
│   │ │ └── lodash._bindcallback@3.0.1 
│   │ └── shellwords@0.1.0 
│   ├── throat@3.0.0 
│   └─┬ yargs@5.0.0 
│     ├── cliui@3.2.0 
│     ├── get-caller-file@1.0.2 
│     ├── lodash.assign@4.2.0 
│     ├── require-directory@2.1.1 
│     ├── set-blocking@2.0.0 
│     ├── which-module@1.0.0 
│     ├── window-size@0.2.0 
│     └─┬ yargs-parser@3.2.0 
│       └── camelcase@3.0.0 
├── jest-react-native@16.0.0 
└── react-test-renderer@15.3.2 

oo run your app on iOS:
   cd /Users/foo/js/testreact/AwesomeProject
   react-native run-ios
   - or -
   Open /Users/foo/js/testreact/AwesomeProject/ios/AwesomeProject.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/foo/js/testreact/AwesomeProject
   react-native run-android
(root)MacBook-Air:testreact foo$ ls
AwesomeProject  node_modules
(root)MacBook-Air:testreact foo$ cd AwesomeProject

プロジェクトを起動する。

(root)MacBook-Air:testreact foo$ ls
AwesomeProject  node_modules
(root)MacBook-Air:testreact foo$ cd AwesomeProject
(root)MacBook-Air:AwesomeProject foo$ react-native run-ios
(node:50389) DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.
(node:50389) DeprecationWarning: Using Buffer without `new` will soon stop working. Use `new Buffer()`, or preferably `Buffer.from()`, `Buffer.allocUnsafe()` or `Buffer.alloc()` instead.
Found Xcode project AwesomeProject.xcodeproj
Launching iPhone 6 (iOS 9.2)...
Building using "xcodebuild -project AwesomeProject.xcodeproj -scheme AwesomeProject -destination id=94014D0C-C073-403A-B97B-34A8391B104E -derivedDataPath build"
User defaults from command line:
    IDEDerivedDataPathOverride = /Users/foo/js/testreact/AwesomeProject/ios/build

途中省略

** BUILD SUCCEEDED **

Installing build/Build/Products/Debug-iphonesimulator/AwesomeProject.app
Launching org.reactjs.native.example.AwesomeProject
org.reactjs.native.example.AwesomeProject: 51325

プロジェクトディレクトリの中身

MacBook-Air:AwesomeProject foo$ ls -la
total 64
drwxr-xr-x   14 foo  staff    476 10 29 13:51 .
drwxr-xr-x    4 foo  staff    136 10 28 20:39 ..
-rw-r--r--    1 foo  staff     31 10 28 20:41 .babelrc
-rw-r--r--    1 foo  staff    114 10 28 20:41 .buckconfig
-rw-r--r--    1 foo  staff   1742 10 28 20:41 .flowconfig
-rw-r--r--    1 foo  staff    424 10 28 20:41 .gitignore
-rw-r--r--    1 foo  staff      2 10 28 20:41 .watchmanconfig
drwxr-xr-x    4 foo  staff    136 10 28 20:41 __tests__
drwxr-xr-x   10 foo  staff    340 10 28 20:41 android
-rw-r--r--    1 foo  staff   1118 10 28 20:41 index.android.js
-rw-r--r--    1 foo  staff   1084 10 28 20:41 index.ios.js
drwxr-xr-x    6 foo  staff    204 10 29 13:51 ios
drwxr-xr-x  712 foo  staff  24208 10 28 20:41 node_modules
-rw-r--r--    1 foo  staff    500 10 28 20:41 package.json

エミュレータとReact Package Managerが起動する。

f:id:naotoogawa:20161030184239p:plain

ソースのビルドエラー時はエミュレータにエラー内容が出る。

f:id:naotoogawa:20161030184327p:plain

ログの場所

http://qiita.com/rizumita/items/fbf41717a80bde1c05c8