React Native--01 Mac下React Native 环境的配置

本文介绍了在Mac上配置React Native开发环境的步骤,包括安装Homebrew、Node.js、npm、watchman和flow。遇到npm安装权限问题时,需要使用sudo命令。最后通过react-native init创建了一个AwesomeProject来验证环境是否配置成功。
摘要由CSDN通过智能技术生成
几个重要的React Native 学习网站:

第一个是facebook的推广React -Native的官网,下面是对应的中文网址。
http://wiki.jikexueyuan.com/project/react-native/GettingStarted.html
http://facebook.github.io/react-native/docs/running-on-device-ios.html#content
http://reactnative.cn/docs/getting-started.html#content

环境的配置:

1、安装Homebrew 
Mac下是默认配有ruby环境的,只需要打开终端,输入以下命令行:

<span style="font-size:18px;">ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"</span>


可能会提示你的电脑已经装有Homebrew了,不知道是这台电脑是之前有人已经安装过还是Mac电脑本身就自带有的。不过不重要,先把环境配置好。


<span style="font-size:18px;">It appears Homebrew is already installed. If your intent is to reinstall you
should do the following before running this installer again:
    ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)"
The current contents of /usr/local are bin etc git include lib mysql mysql-5.6.11-osx10.7-x86_64 share .git</span>

建议先卸载再安装,我第一次安装的时候,后面安装npm时候,各种不清楚地错误,然后我先是重新安装之后,配置后面的npm时就OK了。
卸载命令行:

<span style="font-size:18px;">ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)"</span>

2、安装Node.js
下载网址:https://nodejs.org/en/。这个安装的过程没啥好说的。

3、安装NodeJS包管理工具npm
具体的使用参看官网 https://docs.npmjs.com

4、通过Homebrew来安装watchman
命令行:

<span style="font-size:18px;">brew install watchman</span>

5、通过Homebrew安装 flow
命令行:
<span style="font-size:18px;">brew install flow</span>

Facebook的reactNative 官网提倡经常去更新brew ,brew update 或者 brew upgrat让程序保持最新状态

运行demo:
在终端中运行一下命令行
<span style="font-size:18px;">npm install -g react-native-cli</span>

会出错:
<span style="font-size:18px;">npm ERR! tar.unpack untar error /Users/dengjianshuang/.npm/react-native-cli/0.1.10/package.tgz
npm ERR! Darwin 14.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "-g" "react-native-cli"
npm ERR! node v4.2.3
npm ERR! npm  v2.14.7
npm ERR! path /usr/local/lib/node_modules/react-native-cli
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall mkdir

npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/react-native-cli'
npm ERR!     at Error (native)
npm ERR!  { [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/react-native-cli']
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'mkdir',
npm ERR!   path: '/usr/local/lib/node_modules/react-native-cli',
npm ERR!   fstream_type: 'Directory',
npm ERR!   fstream_path: '/usr/local/lib/node_modules/react-native-cli',
npm ERR!   fstream_class: 'DirWriter',
npm ERR!   fstream_stack:
npm ERR!    [ '/usr/local/lib/node_modules/npm/node_modules/fstream/lib/dir-writer.js:35:25',
npm ERR!      '/usr/local/lib/node_modules/npm/node_modules/mkdirp/index.js:47:53',
npm ERR!      'FSReqWrap.oncomplete (fs.js:82:15)' ] }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.

npm ERR! Please include the following file with any support request:</span>

因为npm install -g react-native-cli 命令行需要root权限支持,所以应该是

<span style="font-size:18px;">sudo npm install -g react-native-cli</span>
</pre><span style="font-size:18px;">然后输入密码等待安装。</span></div><div><span style="font-size:18px;"></span></div><div><span style="font-size:18px;">安装成功之后,初始化一个AwesomeProject仓库(不知道这样理解对不对):</span></div><div><span style="font-size:18px;"></span></div><div><pre name="code" class="plain"><span style="font-size:18px;">react-native init AwesomeProject</span>

初始化成功之后提示如下:
<span style="font-size:18px;">Setting up new React Native app in /Users/dengjianshuang/AwesomeProject
To run your app on iOS:
   Open /Users/dengjianshuang/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/dengjianshuang/AwesomeProject
   react-native run-android</span>

进入到对性的文件夹下,去到iOS文件夹下,打开AwesomeProject.xcodeproj就可以了。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值