React Native环境配置

作者: 天方夜歌 | 来源:发表于2018-04-21 14:22 被阅读42次

    React-native 作为facebook开源项目,最近是火爆的一塌糊涂,它采用node.js能够写ios和android的native界面代码,简直是太酷了。支持动态更新,而且appstore 提交不会拒绝。

    一般学习新的技术都是从HelloWorld开始的,我们先搞个HelloWorld看看神奇的React-native。

    注意:不管安装什么都不要随意动键盘,比如在安装这些软件的时候点击一次return即可,其他的时间都在等,除非提示你按下return键,或输入密码,安装的时候注意观察,每一个步骤复制上去即可

    一,环境配置


    1)、Homebrew,Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件。

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

    2)、Homebrew默认安装的NodeJS是最新版本,一般都满足要求。

     brew install node
    
    

    安装完节点后建议设置NPM镜像以加速后面的过程(或使用科学上网工具)注意:不要使用CNPM CNPM安装的模块路径比较奇怪,打包不能正常识别!

    npm config set registry https://registry.npm.taobao.org --global
    
    npm config set disturl https://npm.taobao.org/dist --global
    
    

    3)、Yarn,React Native的命令行工具(react-native-cli)
    Yarn是Facebook提供的替代npm的工具,可以加速节点模块的下载.React Native的命令行工具用于执行创建,初始化,更新项目,运行打包服务(packager)等任务。

    npm install -g yarn react-native-cli
    
    

    安装完线后同理也要设置镜像源:

    yarn config set registry https://registry.npm.taobao.org --global
    
    yarn config set disturl https://npm.taobao.org/dist --global
    
    

    安装完纱之后就可以用纱线代替NPM了,用例如yarn代替npm install命令,用yarn add 某第三方库名代替npm install –save 某第三方库名。

    4)、配置Xcode
    虽然一般来说命令行工具都是默认安装了,但你最好还是启动Xcode中,并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools.Xcode的命令行工具中也包含一些必须的工具,比如git等。

    5)、推荐安装的工具
    守望者 watchman
    守望是由Facebook的提供的监视文件系统变更的工具安装此工具可以提高开发时的性能(打包可以快速捕捉文件的变化从而实现实时刷新)此工具官方虽然的英文推荐安装,但在实践中,认为我们工具此的英文必须安装,否则可能无法正常开发。

    brew install watchman
    
    

    流程 flow
    流程是一个静态的JS类型检查工具译注。你在很多示例中看到的奇奇怪怪的冒号问号,以及方法参数中像类型一样的写法,都是属于这个流工具的语法这一语法并不属于ES标准,只是实自家的代码规范。所以新手可以直接跳过(即不需要安装这一工具,也不建议去费力学习流相关语法)。

    brew install flow
    
    

    二、Xcode运行一个项目

     react-native init MyApp
     cd MyApp
     react-native run-ios //启动项目
    
    

    你也可以在MyApp中打开MyApp.xcodeproj然后运行 在MyApp->ios->MyApp.xcodeproj 打开像平时运行iOS一样运行项目

    三、Hello Word

    终端 这里写图片描述

    这是配置成功之后运行的效果。。。

    相关文章

      网友评论

        本文标题:React Native环境配置

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