React Native安装配置环境

闫雪同学
702 阅读3分钟

1. 安装homebrew

OSX套件管理器，可以从里面获取到相关包。很多开源的东西，苹果没有安装源，可以使用homebrew来管理安装。

  • 查看ruby版本 ruby -version
  • 安装homebrew ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  • 如果出错Error: /usr/local/Cellar is not writable. You should change the ownership and permissions of /usr/local/Cellar back to your user account: 。输入sudo chown -R $(whoami) /usr/local/Cellar。
  • 检测安装brew版本 brew -v

2. 安装npm和node.js

node.js的包管理器。所有资料都是在npm上。

  • 安装 node.js。命令行安装太麻烦，直接下载安装nodejs.org/en/#downloa…，自动安装好npm。
  • 检测安装node版本 node -v npm -v

3.安装watchman

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

  • brew install watchman

4.安装flow

flow是javaScript的静态类型检查器，建议安装它以方便代码中的类型错误。

  • brew install flow
  • 如果发现commond not found，加sudo

5. 安装React Native

  • 安装npm install -g react-native-cli
  • 更新react-native版本 npm update -g react-native-cli
  • 升级或者降级npm包的版本 npm install --save react-native@0.18
  • 如报错
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! path /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!  { Error: EACCES: permission denied, access '/usr/local/lib/node_modules'

加 sudo

6. 创建一个React Native项目

在文件夹目录下创建helloWorld项目：react-native init HelloWorld

运行在ios

  • 如果xcode运行React Native项目一直运行不下去：

原因：init命令默认会创建最新的版本，而目前最新的版本需要下载boost库编译。此库体积庞大，在国内即便翻墙也很难下载成功，导致很多人无法正常运行iOS项目，推荐暂时使用0.44.3的版本。
解决办法： 创建项目暂时先使用react-native init HelloWorld --version 0.44.3，指定某个版本。你可以使用--version参数（注意是两个杠）创建指定版本的项目。例如react-native init Helloword --version 0.44.3。注意版本号必须精确到两个小数点。

  • RN项目运行起来后会自启一个本地服务器。如果RN项目在运行，就不能关闭这个本地服务器。
~/Documents/RN/HelloWorld/node_modules/react-native/packager ~
Scanning 664 folders for symlinks in /Users/yanxue/Documents/RN/HelloWorld/node_modules (10ms)
 ┌────────────────────────────────────────────────────────────────────────────┐ 
 │  Running packager on port 8081.                                            │ 
 │                                                                            │ 
 │  Keep this packager running while developing on any JS projects. Feel      │ 
 │  free to close this tab and run your own packager instance if you          │ 
 │  prefer.                                                                   │ 
 │                                                                            │ 
 │  https://github.com/facebook/react-native                                  │ 
 │                                                                            │ 
 └────────────────────────────────────────────────────────────────────────────┘ 
Looking for JS files in
   /Users/yanxue/Documents/RN/HelloWorld 

React packager ready.

Loading dependency graph, done.
Bundling `index.ios.js`  100.0% (406/406), done.

运行在安卓

比谷歌官方模拟器更易用，性能更好。www.genymotion.com/download 因为安卓模拟器都是跑到虚拟机上，安装virtualbox rj.baidu.com/search/inde…。这里有个坑：它在提示需要要license key的时候，下面有个很小控件提示”个人使用“，你点进去就可以用了。

webstorm下开发RN

  • 下载www.jetbrains.com/webstorm/
    注册时，在打开的License Activation窗口中选择“License server”，在输入框输入网址: http://idea.codebeta.cn
  • webstorm下ReactNative代码自动提示https://github.com/virtoolswebplayer/ReactNative-LiveTemplate
avatar
文章
阅读
粉丝