react native mac下环境搭建

mac下环境搭建

一、环境需求

1、        安装xcode

2、        安装Homebrew （这一步骤要在网络好的情况下安装，用时较长），

Homebrew是OS X的套件管理器，我们可以通过它获取并安装很多组件。

 

终端输入以下命令完成安装

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安装完成如下图：

brew –v用来检查brew是否安装成功，如下图：

3、        安装npm和nodejs

安装地址：http://nodejs.org/en/download/

4、        安装Watchman （需要有网才能安装，相对较快）

该插件用于监控bug文件和文件变化，并且可以触发指定操作

终端输入brew install watchman完成安装，成功安装如下图：

5、        安装flow（需要有网才能安装，相对较快）

flow是js的一个类型检查器，建议安装，以便方便找到代码中的可能存在的类型错误。

终端输入brew install flow完成安装，安装成功如下图：

 

二、Reactnative安装

1、安装react native

  sudonpm install –g react-native-cli（需要网络，安装相对较慢），安装完成如下：

三、Reactnative 的第一个应用

1、执行命令命令生成一个工程

  react-nativeinit 项目名称（英文字母）

等待一会，会在当前目录下生成一个文件夹，里面包含了所有的文件，有iOS和安卓的。

 

四、iOS下程序的运行

   支持xcode7及以上版本，直接用xcode打开即能运行。

 

iOS刷新页面的快捷键是Command + R

 

五、android下程序的运行

1、先安装jdk

2、安装android studio

3、android studio安装完成后打开项目会一直卡住，解决方案：记得找文件夹时显示隐藏的文件。

http://blog.csdn.net/yyh352091626/article/details/49075965

4、用模拟器跑程序

 用android自带的模拟器跑出来程序，如果遇到unable to load script from assets这个错误，解决方案为

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

第二步：进入项目的根目录（项目名称所在的目录下）下，执行

React-nativebundle --platform Android --devfalse --entry-file index.android.js --bundle-outputandroid/app/src/main/assets/index.android.bundle --assets-destandroid/app/src/main/res

第三步：在执行 react-nativerun-android 跑起来了 

参考：

http://blog.csdn.net/u013179982/article/details/73741958

6、        安卓下刷新页面的快捷键是RR，按两次R。如果出现

could not connect to develpment server那是因为没有开启本地服务器。

开房方法，终端中进入程序目录中，然后输入react-native start即可。

六、React-Native在webstorm上代码提示

1、打开下载资源

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

2、将包里面的ReactNative.xml文件拷贝到

        ~/Library/Preferences/WebStorm11/templates目录中，如果没有templates文件新建一个，然后将ReactNative.xml文件拷贝进去。

3、将包里面的ReactNative.xml文件拷贝到

        ~/Library/Preferences/WebStorm11/options目录中