美文网首页ReactNative学习iOS DeveloperiOS
React Native环境配置和创建新项目

React Native环境配置和创建新项目

作者: 小唐羽锋 | 来源:发表于2016-03-31 16:45 被阅读177次

    因为我是做原生iOS端应用开发的,所以这里贴出的是OS X下React Native的环境配置,供大家参考,下列步骤我都一一验证过。

    本人Mac配置:
    机型:MacBook Pro 13.3寸
    系统:OS X EI Capitan 10.11.3
    编译器版本:Xcode 7.2


    环境配置步骤:

    1.Homebrew的安装

    首先建议你先安装包管理工具Homebrew(简称brew),是Mac OSX上的软件包管理工具,能在Mac中方便的安装软件或者卸载软件,它可以说是Mac下的apt-get等神器。

    打开终端,输入下面的命令即可。

    ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    
    2.安装Node.js

    1.你可以用包管理工具Homebrew来安装,在终端输入下面的口令

    brew install node
    

    通过Homebrew安装,会自动安装好node和npm。

    使用下面命令查询Node在那个目录下

    which node
    

    npm是Node模块管理器,功能极其强大。

    npm -v //查看当前npm版本号
    
    npm install <packagename> //安装模块到node_modules
    

    安装之前,npm install 会先检查,node_modules目录之中是否已经存在指定模块。如果存在,就不再重新安装了,即使远程仓库已经有一个新版本。
    如果你希望,一个模块不管是否安装过,npm都要强制重新安装,可以使用 --force参数。

    npm install <packagename> --force
    

    如果想更新已安装的模块,使用下面的命令

    npm update <packagename>
    

    2.通过官网安装Node.js
    https://nodejs.org/en/,选择左边多数人选择的版本

    网站截图
    3.安装watchman(可选)

    建议你安装watchman,它是一个监控文件改动的工具。在命令行输入下列命令

    brew install watchman
    
    4.安装flow(可选)

    如果您希望使用flow来为js代码加上类型检查,那么输入下列命令来安装flow

    brew install flow //检查JS静态类型
    

    差不多环境配置的工作就完成了。


    项目创建

    1.安装命令行工具

    $  npm install -g react-native-cli 
    
    提示如图所示

    2.创建一个空项目

    $ react-native init HelloWorld
    
    创建成功

    3.cd到创建NewProject项目的目录,在iOS目录中,双击.xcodeproj即可在Xcode中打开项目,可以看到它现在同时包含了Android和iOS目录.

    目录

    4.command +r 启动项目,终端和模拟器出现下面的界面是,表示你创建的项目启动成功了。

    模拟器界面 React Packager界面

    备注:由于网络原因,react-native命令行从npm官方源拖代码时会出现网络问题,所以请将npm仓库替换为国内镜像

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

    注意执行init时切记不要在前面加上sudo,否则新项目的目录所有者会变为root而不是当前用户,导致一系列权限问题,请使用chown修复。


    小试牛刀

    暂且不用管模拟器,在目录中找到index.ios.js文件,用文本编辑器打开,在<Test>和</Test>之间加上一句话,然后在编译器command + r,看看效果.

    Simulator Screen Shot 2016年3月31日 16.41.11.png

    今天先这样,我会继续更新学习笔记。

    相关文章

      网友评论

      本文标题:React Native环境配置和创建新项目

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