[mac笔记]ReactNatived环境配置

http://blog.csdn.net/xiangzhihong8/article/details/53914336

http://www.jianshu.com/p/f1d9fbd35413

1环境需求

1.1安装Homebrew

1.2安装npm

1.3安装Nods.js

1.4安装WatchMan

brew install watchman

上一行命令安装不成功，尝试用Macport方式安装

参考链接：

根据自己macOS的系统下载MacPorts-2.4.2-10.12-Sierra.pkg

https://guide.macports.org/#installing.macports

http://www.bubuko.com/infodetail-1950363.html

http://blog.csdn.net/bqw2008/article/details/40108217

http://facebook.github.io/watchman/docs/install.html

$ git clone https://github.com/facebook/watchman.git
$ cd watchman
$ git checkout v4.9.0  # the latest stable release
$ ./autogen.sh
$ ./configure
$ make
$ sudo make install

1.5安装flow

http://www.imooc.com/article/15855

https://github.com/facebook/flow/releases

sudo npm install --save-dev flow-bin

 
 

  
  
5.1 执行命令,生成一个工程
  
  

   
   
react-native init 项目名称
  
  
  
  
注意:由于众所周知的网络原因，需要等待一段时间（具体视网络情况而定）。react-native命令行从npm官方源拖代码时会遇上麻烦，可以将npm仓库源替换为国内镜像：
  
  

   
   
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
  
  
 
 

6第一个测试程序AHelloWorld

react-native init AHelloWorld

成功后结果如下

8运行android工程

8.1需要将react-native自动生成的工程修改成自己环境相同的参数，这样才能变异运行android工程

8.2运行时报错unable to load script from assets 'index.android bundle'

解决办法参考http://blog.csdn.net/u014175342/article/details/73823904

第一步：在  android/app/src/main 目录下创建一个  assets空文件夹

第二步骤：项目的目录下执行：项目目录中文件叫做index.js

 （1）生成index.android.bundle,启动的时候需要

macs-Mac-mini:BViewDemo mac$ react-native bundle --platform android --dev true --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/  
Scanning folders for symlinks in /Users/mac/DavidLong/HTML5/h5/BViewDemo/node_modules (15ms)
Scanning folders for symlinks in /Users/mac/DavidLong/HTML5/h5/BViewDemo/node_modules (7ms)
Loading dependency graph, done.
Loading dependency graph...bundle: start
bundle: finish
bundle: Writing bundle output to: android/app/src/main/assets/index.android.bundle
bundle: Done writing bundle output

（2）生成index.bundle,reload的时候需要

macs-Mac-mini:AHelloWorld mac$ react-native bundle --platform android --dev true --entry-file index.js --bundle-output android/app/src/main/assets/index.bundle --assets-dest android/app/src/main/res/

Scanning folders for symlinks in /Users/mac/DavidLong/HTML5/h5/AHelloWorld/node_modules (6ms)
Scanning folders for symlinks in /Users/mac/DavidLong/HTML5/h5/AHelloWorld/node_modules (7ms)
Loading dependency graph, done.
Loading dependency graph...bundle: start
bundle: finish
bundle: Writing bundle output to: android/app/src/main/assets/index.bundle
bundle: Done writing bundle output

上面指令中，--dev true，摇晃手机才能弹出重新加载js弹框，并且还需要将app悬浮框选择允许

（3）app安装后需要在权限管理中允许悬浮窗

could not connect to development server

解决办法参考链接http://blog.csdn.net/coder_nice/article/details/52933187

（4）地址改为192.168.1.1.5:8081

webstorm代码提示插件

https://github.com/virtoolswebplayer/ReactNative-LiveTemplate