美文网首页程序员让前端飞React Native开发
React Native入门:环境安装和在模拟机运行

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

作者: 程序员小哥哥 | 来源:发表于2017-09-29 14:54 被阅读0次

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

    学习rn的前提:

    • 熟悉ECMAScript 6(JavaScript 6)
    • 熟悉React

    官网

    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
    

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/yfkiextx.html