react native mac下环境搭建

た入场券 2022-06-07 13:36 339阅读 0赞

**mac下环境搭建**

**一、环境需求**

1、        安装xcode

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

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

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

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

安装完成如下图：

![Center][]

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

![Center 1][]

3、        安装npm和nodejs

安装地址：[http://nodejs.org/en/download/][http_nodejs.org_en_download]

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

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

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

![Center 2][]

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

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

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

![Center 3][]

**二、Reactnative安装**

1、安装react native

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

![Center 4][]

**三、Reactnative 的第一个应用**

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

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

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

**四、iOS下程序的运行**

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

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

**五、android下程序的运行**

1、先安装jdk

![Center 5][]

2、安装android studio

![Center 6][]

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

[http://blog.csdn.net/yyh352091626/article/details/49075965][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][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][https_github.com_virtoolswebplayer_ReactNative-LiveTemplate]

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

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

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

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

[Center]: /images/20220607/f4748f7854794454b88ac2bcd61cb9b2.png
[Center 1]: /images/20220607/ad5659ee9af14d30a4f245c672344613.png
[http_nodejs.org_en_download]: http://nodejs.org/en/download/
[Center 2]: /images/20220607/23b9539bf01f41a1b7a934729785458d.png
[Center 3]: /images/20220607/63b595926cd740629243335347c79da0.png
[Center 4]: /images/20220607/796bab58457e4f4b8f5fd370118662cb.png
[Center 5]: /images/20220607/8e12d6ac826a471083b3204422228dac.png
[Center 6]: /images/20220607/46bbef60c9e64e21983287f6d3851a0c.png
[http_blog.csdn.net_yyh352091626_article_details_49075965]: http://blog.csdn.net/yyh352091626/article/details/49075965
[http_blog.csdn.net_u013179982_article_details_73741958]: http://blog.csdn.net/u013179982/article/details/73741958
[https_github.com_virtoolswebplayer_ReactNative-LiveTemplate]: https://github.com/virtoolswebplayer/ReactNative-LiveTemplate