程序员让前端飞React Native开发

React Native入门:环境安装和在模拟机运行

2017-09-29  本文已影响0人  程序员小哥哥

备注:因为我都是在mac平台上进行开发,所以这里的环境安装是也是针对于mac平台的,下方命令的brew在linux平台上是apt,还需要找对应linux平台对应的命令,这点请注意。

学习rn的前提:

官网

1.关于React

http://facebook.github.io/react

2.关于JSX(自定义xml标记语言)

http://facebook.github.io/react/docs/introducing-jsx.html

3.React Native

http://facebook.github.io/react-native

一:安装React Native

1.https://nodejs.org/en/下载nodejs安装包

node_two.png
node_one.png

傻瓜式安装之后,node和npm都会安装好。这时候在命令行查看node和npm版本发现都存在。

这里也可以通过命令来安装

brew install node
brew install watchman(react-native官方建议安装的软件包,方便在本地调试)
npm install -g react-native-cli

-g是全局的意思,这样方便在任何路径都可以使用react-native
react-native -v查看,会显示react-native的版本,这里就代表安装成功了。

如果版本过低,可以用以下命令进行更新

brew update(更新brew本身)
brew upgrade node(更新某一个软件)
npm update -g npm
npm update -g react-native-cli

二:创建第一个项目

react-native init react_native_advanced

rn的更新其实非常快的,基本上每周一个版本。这里的init命令初始化的就是rn最新的版本,我们可以在项目下用react-native -v来查看当前项目的版本。
我安装之后查看rn的版本是0.48.4,比如我就想要0.42.3
我们如何指定自己想要的版本呢?
这里需要安装个工具: rninit

sudo npm install -g rninit

下次创建项目,比如我这里创建个rn项目名称是react_native_demo 版本号是0.42.3

rninit init react_native_demo --source react-native@0.42.3

三:怎样在iOS模拟器中运行项目

1.进入项目根目录,确保自己电脑上已经那装了Xcode,执行命令

open ios/react_native_advanced.xcodeproj

2.1


ios_one.png

2.2选择模拟机:


ios_two.png

2.3点击项目中运行(斜三角形)

ios_three.png

说明:这里会帮我们启动一个8081的端口,是供我们在本地测试用的。
这里也可以通过命令来启动

react-native start
上一篇下一篇

猜你喜欢

热点阅读