React Native Mac OS X 开发环境搭建

转载 2016年05月31日 23:15:46

React Native Mac OS X 开发环境搭建

(一)前言

FaceBook早期开源发布了React Native For iOS,在2015年9月15日也发布了React Native For Android。虽然Android版本发布比较迟,但是没有阻挡广大前段移动设备开发者的强烈热情。可以这样说,在2015年移动平台有两个技术研究比较火,第一是阿里,百度,腾讯,携程,360等一线互联网公司的插件化,热更新等技术,第二就是React Native。在国外很多创业型互联网公司都在使用React Native技术。2016年将是React Native大力发展的一年。所以,现在先告一段落本命开发——iOS开发。研究React Native开发技术。

(二)React Native介绍
React Native的介绍,言简意赅一点就以下几个特点:
1. 组件化,React Native提供给开发者封装好的组件,开发者可以嵌套组件。
2. Web、Android、iOS多平台开发,通俗地讲就是learn once,write everywhere,前段界面使用React分平台开发,下层核心服务逻辑层复用,提高开发效率,降低开发成本。

React Native项目github地址:https://github.com/facebook/react-native

React Native项目官网文档:http://facebook.github.io/react-native/docs/getting-started.html

(三)React Native配置安装
目前博主主要是使用Mac开发,所以只介绍OS X的配置安装。

3.1 Homebrew安装
Homebrew是OS X不可或缺的组件管理器,通过它可以很方便地安装很多组件。安装Homebrew方法如下:
在终端输入 ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”
然后通过 brew -v检查是否安装成功。成功如下图:
这里写图片描述

3.2 Node.js安装,Node.js需要安装 Node.js 4.0或者更高版本,这边推荐使用Node版本管理器nvm来进行安装。

First:安装nvm,查看官网,官网推荐使用curl或者wget方式安装以及更新。
第一种:curl方式:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash

第二种:wget方式

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash

不过在使用这两种方式之前,可以采用brew install curl或者brew install wget来确保已经安装curl或者wget。这里我们使用第一种方式安装,具体截图如下:
这里写图片描述

这样已经安装了nvm,但是需要配置一下环境变量到 .bash_profile文件中,具体配置如下:
命令行: vim .bash_profile , 进行修改。如下图:
这里写图片描述
最终通过命令行 nvm –version检查一下nvm是否安装完成,并且全局可用。

Second:安装Node.js, 官网文档直接命令行执行:

nvm install node && nvm alias default node

这个会进行安装Node.js最新版本,并且会给我们打个别名,方便使用。通过nvm我们可以安装多个版本的Node.js,并且可以非常轻松的选择不同的版本进行切换使用。

【注意】在安装Node.js 的时候,默认会安装npm,如果现在采用是Node 5.0版本,官网是推荐安装npm 2,该版本比npm 3速度更加快。在安装完Node之后,命令行运行npm install -g npm@2安装即可。

Third:安装watchman,这个用来监控bug,并且可以触发指定的操作,安装方式如下:

brew install watchman

Fourth: 安装flow,flow是一个 JavaScript 的静态类型检查器,建议安装它,以方便找出代码中可能存在的类型错误,官网:http://www.flowtype.org/

以上就是Node.js安装,以及Node.js的一些工具安装。

3.3 React Native应用运行环境安装

针对iOS开发,我们只需要安装Xcode 7.0或者7.0以后版本,该可以通过App Store进行下载安装

针对Android开发,Android环境配置网上非常多了,我推荐大家先根据
Android开发环境搭建 这篇指导进行安装;接着,推荐使用genymotion作为虚拟机(genymotion使用大家自行google,国内主要是设计到翻墙,困难的地方就是下载genymotion的时候很慢,其他安装网上其他教程一步步安装就是,在此就不详细介绍)。

3.4 React Native 安装
现在,就要开始安装React Native 这个框架,这也是最激动人心的时刻到了,使用命令行:

npm install -g react-native-cli

经过上面这么复杂的步骤,基本完成了React Native基本环境搭建工作,下面创建一个React Native项目来演示激动的一刻。

(四)React Native第一个应用(AwesomeProject)
现在经过这么多步骤终于搭建好了,就不创建一个Hello World项目了,就创建一个AwesomeProject项目,命令行下面:

react-native init AwesomeProject

这一步会等很久,因为要联网下载一些东西。可能要等上10多分钟,需要等等。创建成功以后,目录结构如下:
这里写图片描述
我们仔细看上面的目录,会发现该该生成android和ios两个平台的原生项目,大家有兴趣可以打开android和ios目录看一下,里边就是一个Android Studio和Xcode创建的项目。其中index.android.js和index.ios.js文件为Android和IOS的空壳应用文件。另外还有一个node_modules文件夹,该为Node.js存放和管理npm的文件夹,也包含React Native框架文件。
查看项目部分代码index.ios.js如下:
这里写图片描述

4.1.运行iOS 应用:
点击iOS文件夹下的AwesomeProject.xcodeproj进行运行Xcode,使用编辑器修改index.ios.js,就可以修改界面。

4.2.运行Android应用:
First:命令行执行cd AwesomeProject,路径切换到项目主目录
Second:命令行执行react-native run-android进行加载运行android 应用。
Third:同样可以使用编辑器进行打开和修改index.android.js文件,接着通过菜单按钮选择Reload JS来进行刷新修改

运行界面截图如下:

这里写图片描述

android虚拟机运行界面如下:
这里写图片描述

(六)最后总结
今天我们从初始开始,安装各种工具以及命令,完成了React Native的基础环境的搭建,并且成功运行第一个React Native for Android的应用。下一篇我们对推荐IDE(Atom)以及相关插件的安装配置讲解。

转载自: http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native-for-android%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE%E4%BB%A5%E5%8F%8A%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%AE%9E%E4%BE%8B/

在Mac上搭建React Native开发环境(iOS && Android)

一、配置iOS开发环境①基本环境需求1.先安装Homebrew:用于安装NodeJS和其他工具必须的$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githu...
  • huxiaoqiao163
  • huxiaoqiao163
  • 2016年05月16日 11:48
  • 6875

React Native Mac环境搭建

这里只介绍Mac 上的环境搭建,其他环境搭建请参考: http://facebook.github.io/react-native/docs/getting-started.html 。 上面有所...
  • totogo2010
  • totogo2010
  • 2016年06月03日 11:54
  • 9166

Mac下安装React Native

安装React Native 官网:http://facebook.github.io/react-native/docs/getting-started.html 中文:http://wiki....
  • l863784757
  • l863784757
  • 2015年12月25日 15:07
  • 6685

mac 下安装react native

react native安装以及创建工程 1、Homebrew 可以傻瓜安装node,watchman和flow的软件管理工具。 安装命令:$ ruby -e "$(curl -fsSL http...
  • zww1984774346
  • zww1984774346
  • 2016年07月30日 12:19
  • 855

Mac下搭建react native开发环境

安装必需软件 Homebrew Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件。 /usr/bin/ruby -e "$(curl -fsSL https...
  • LIANGJIANGLI
  • LIANGJIANGLI
  • 2017年07月31日 14:27
  • 974

一步一步搭建ReactNative开发环境(Mac)

1 环境搭建 React Native主要依赖以下环境。 Mac OS X操作系统。 推荐使用Xcode 7.3.0或者更高版本。 安装Node.js v6.2.1或者最新版本...
  • bluewindaa
  • bluewindaa
  • 2016年09月09日 16:14
  • 2424

Mac下安装React native

首先是安装node环境。brew install node*安装node如果出现某些异常,可以尝试加上sudo 在git上下载,或者直接clone项目 React native npm install...
  • sujudz
  • sujudz
  • 2015年03月30日 23:02
  • 12548

Mac上搭建React Native开发环境

基础环境搭建 环境搭建参考 http://blog.csdn.net/huxiaoqiao163/article/details/51423903, 感谢作者 遇到的问题 1、x...
  • hanjiyu
  • hanjiyu
  • 2018年01月09日 14:36
  • 32

在Mac上搭建React Native开发环境

概述前面我们介绍过在window环境下开发React Native项目,今天说说怎么在mac上搭建一个RN的开发环境。配置mac开发环境基本环境安装1.先安装Homebrew:用于安装NodeJS和其...
  • xiangzhihong8
  • xiangzhihong8
  • 2016年12月28日 21:45
  • 12455

React Native学习笔记(一)Mac OS X下React Native的环境搭建

本文介绍Mac OS X系统下的React Native环境搭建过程。 环境要求: Mac OS X操作系统 Xcode6.4或以上版本 Node.js4.0或以上版本 watchman和fl...
  • weimeng809
  • weimeng809
  • 2016年05月08日 17:53
  • 1795
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:React Native Mac OS X 开发环境搭建
举报原因:
原因补充:

(最多只允许输入30个字)