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が起動する。
ソースのビルドエラー時はエミュレータにエラー内容が出る。
ログの場所