在MAC 上搭建React Native 开发环境

React Native 官网

http://facebook.github.io/react-native/docs/getting-started.html#content

中文网站

http://reactnative.cn/docs/0.43/getting-started.html

一 、安装Homebrew

⚠️如果你电脑上没有装Xcode 的话,请先安装好Xode 之后再安装Homebrew

(1)Homebrew是什么

Homebrew 官网 https://brew.sh/index_zh-cn.html

Homebrew is the easiest and most flexible way to install the UNIX tools Apple didn’t include with macOS.(Homebrew是一个包管理器,用于在Mac上安装一些OS X没有的UNIX工具)。

Homebrew是一款Mac OS平台下的软件包管理工具,拥有安装、卸载、更新、查看、搜索等很多实用的功能。简单的一条指令,就可以实现包管理,而不用你关心各种依赖和文件路径的情况,十分方便快捷。

(2)安装

打开终端输入以下命令

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

然后回车就会出现下面的这样

image
image

再次回车

image
image

输入电脑的登录密码,然后等待一会儿安装就完成了。

(3)一些常见的命令

安装完成之后在终端输入brew doctor 验证brew是否安装成功。

brew doctor

查看brew 常用的命令,在终端输入brew help

brew help

结果示例

Example usage:
brew search [TEXT|/REGEX/]
brew (info|home|options) [FORMULA...]
brew install FORMULA...
brew update
brew upgrade [FORMULA...]
brew uninstall FORMULA...
brew list [FORMULA...]

Troubleshooting:
brew config
brew doctor
brew install -vd FORMULA

Developers:
brew create [URL [--no-fetch]]
brew edit [FORMULA...]
http://docs.brew.sh/Formula-Cookbook.html

Further help:
man brew
brew help [COMMAND]
brew home

安装软件 brew install 软件名字(例如git)

brew install git

卸载软件 brew uninstall 软件名字(例如git)

brew uninstall wget

卸载软件brew remove XXX

brew remove wget

检索软件 brew search part_of_package_name 、brew search /regular_expression/

brew search git

检查指定包是否已经安装 brew list | grep package_home

下载安装包但不安装 brew fetch package_name

查看安装包信息 brew info package_name

访问指定包的homepage brew home package_name

列出安装包的内容 brew list package_name

更新安装包 brew upgrade package_name

列出系统上安装的所有包brew list

brew list

更新所有安装包brew update(更新自己)

brew update

⚠️brew 安装的软件存放在 /usr/local/Cellar 中,同时会在 /usr/local/bin, /usr/local/sbin, /usr/local/lib 中创建链接。你可能需要将 /usr/local/sbin 添加到搜索路径中。

(4)卸载brew在终端输入(没有亲自测试不知是否可用)

cd `brew –prefix`
rm -rf Cellar
brew prune 
rm `git ls-files` 
rm -rf Library .git .gitignore bin/brew
rm  -rf README.md share/man/man1/brew
rm -rf Library/Homebrew Library/Aliases 
rm -rf Library/Formula Library/Contributions
rm -rf ~/Library/Caches/Homebrew

⚠️在Mac OS X 10.11系统以后,/usr/local/等系统目录下的文件读写是需要系统root权限的,以往的Homebrew安装如果没有指定安装路径,会默认安装在这些需要系统root用户读写权限的目录下,导致有些指令需要添加sudo前缀来执行,比如升级Homebrew需要:

  1. 对/usr/local 目录下的文件读写进行root用户授权

$ sudo chown -R $USER /usr/local

示例

$ sudo chown -R wentianen /usr/local

2.(推荐)安装Homebrew时对安装路径进行指定,直接安装在不需要系统root用户授权就可以自由读写的目录下

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

参考文章
http://blog.csdn.net/andanlan/article/details/51589800

二、安装node、Watchman

You will need Node.js, Watchman, the React Native command line interface, and Xcode.

We recommend installing Node and Watchman using Homebrew. Run the following commands in a Terminal after installing Homebrew: (我们建议您使用Homebrew安装Node和Watchman。在安装Homebrew后,在终端中运行以下命令:

在终端输入下面的命令

brew install node
brew install watchman

Watchman is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance.(Watchman )(Watchman是Facebook的工具,用于监视文件系统的更改。强烈建议您安装它以获得更好的性能。

Node.js comes with npm, which lets you install the React Native command line interface.

三、创建一个简单的工程

Run the following command in a Terminal:(Node.js带有npm,它允许您安装React Native命令行界面。 在终端中运行以下命令)

npm install -g react-native-cli

(Use the React Native command line interface to generate a new React Native project called "AwesomeProject", then run react-native run-ios inside the newly created folder.
使用React Native命令行界面生成一个名为“AwesomeProject”的新的React Native项目)

react-native init AwesomeProject

我们可以再系统根目录下面看到新创建的工程


image
image

然后再终端中进入这个工程

cd AwesomeProject
react-native run-ios

然后会打开一个终端窗口如下,切记不要关闭这个终端窗口。

image
image

程序跑起来的效果(默认使用的是iphone 6的模拟器)

image

用文本编辑器打开工程里面的index.ios.js 文件。

image
image

打开后我们进行一些简单的文本替换,然后按command + s 保存修改

image
image

然后选择模拟器按Command+ r就可以重新编译程序。

image
image

总结:在家闲着没事瞎搞的,如果写的又不对的地方,请大家指出来,我会修正的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345

推荐阅读更多精彩内容