1、RN跨平台开发——环境搭建

作者: 百事小武 | 来源:发表于2017-01-03 10:10 被阅读5667次

了解React Native

React Native使你能够在Javascript和React的基础上获得完全一致的开发体验,构建世界一流的原生APP。React Native着力于提高多平台开发的开发效率 —— 仅需学习一次,编写任何平台。(Learn once, write anywhere)。Facebook已经在多项产品中使用了React Native,并且将持续地投入建设React Native。

搭建React Native 环境

关于安装React Native的说明可以查看React Native官方文档(http://facebook.github.io/react-native/) 官方网站会提供最新的安装参考。      

首先说明下以后的技术分享均以Mac OS X系统为基础(首先你先准备一台Mac),以为我是一个地道的iOS开发者,也是一名果粉,废话不多说,进入正题你将会用到 Homebrew  一个OS  X系统的通用包管理工具,用来安装 React Native的相关依赖。如果你有一台mac,那么现在就可以同时开发iOS 和Android应用。

1.1 安装Homebrew

打开 Homebrew   根据提示安装。

打开终端,打入命令

安装好Homebrew 之后,运行以下命(比较耗时时):
brew install node
brew install watchman
brew install flow

React Native 包管理器同时使用了node和watchman ,如果在今后的开发过程中遇到问题,建议你更新这些依赖。flow是Facebook公司出品的一个类型检查库,它同样被React Native所采用。                                                                                                                                                   如果安装过程中遇到问题,你可能需要更新brew 和相关依赖包 使用的命令行: brew update     brew upgrade
如果出现错误,你需要修复本地的brew 安装程序,brew  doctor 可以帮助你找到问题所在。

1.2 安装React Native

经过上面漫长的等待你已经安装好了node ,我们接下来 就可以通过npm(Node 包管理器)来安装React Native 的命令工具:
我们通过NPM安装反应母语-CLI的命令行工具。在MAC终端中输入如下命令,其中-g表示全局安装。

npm install -g react-native-cli

这个步骤将会在你的系统全局安装React Native命令行工具。

2.1 开发环境搭建(iOS- 安装Xcode)

为了开发和发布iOS应用,你需要注册一个iOS开发者账号,开发者账号分为两种:个人(99美刀/年)  企业(299美刀/年),用于后期开发完项目部署到iOS应用商店。

(1).你需要在你的mac上面安装Xcode,  它包含了Xocde 集成开发环境。iOS模拟器以及iOS SDK (软件开发工具包)。你可以从应用商店或Xcode 网站(下载地址 ) 下载。

Xcode 网站下载

Xcode 安装成功,接下来配置Android依赖。

2.2开发环境搭建(Android)

Android 依赖的安装步骤比较多,先推荐看下一下官方文档(https://facebook.github.io/react-native/docs/android-setup.html )里面有安装说明,需要注意的是,这些安装都是假设你从来都没有安装过Android 开发环境。

第一步:安装SDK。
第二步:安装模拟器。
第三步:创建模拟器。

首先,你需要安装SDK(Java开发工具包) 和Android SDK。
(1) 安装最新版本的JDK   下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html   如图:2.2(1)

图:2.2(1)

(2) 通过终端命令:brew install android-sdk 安装Android SDK。如 图:2.2(2)

图:2.2(2)

(3) 在shell配置文件中正确导出 ANDROID_HOME 环境变量 (~/.bashrc  、 ~/.zshrc 或其他shell)。

export ANDROID_HOME=/usr/local/opt/android-sdk

Mac 下的安卓配置环境变量
(1). 找到安卓的安装路径,我们在通过终端命令安装的时候,在安装成功之后有一个我们的安装路径,我们可以直接获取到 如图(3).1
(2). 在终端输入命令.进入用户目录    $cd ~
(3). 然后输入命令,该命令的作用是如果不存在.bash_profile文件,则创建该文件    $touch .bash_profile
(4).然后输入命令,该命令的作用是用文本编辑器TextEdit打开.bash_profile文件。如果你是第一次配置环境变量,则该文档应该是空的。
$open -e .bash_profile      将export ANDROID_HOME=/usr/local/opt/android-sdk   添加到文件中。

图(3).1

许多Android 相关的开发任务都使用这个环境变量。需要确保添加环境变量之后执行source 命令使得配置可以立即生效。

接下来可以在终端执行 android 命令,从而打开Android SDK 管理器,选择 红色区域勾选的 如图  (3).2 进行安装。

(3).2

安装会话费一些时间,接下来,我们先安装模拟器 和相关的工具,
启动一个新的 终端页面。输入命令:android 启动Android SDK管理器,我们再次安装 Intel x86 Emulator Accelerator(HAXM installer) 如图(3).3 点击install 1 package。

图(3).3

这些依赖包 使我们供我们创建Android虚拟设备(Android Virtual Device ,AVDs)或者模拟器 ,我们现在还未创建任何模拟器,我们接下来创建它,运行以下命令android avd
启动AVD 管理器 如图(3).4

图(3).4

会弹出一个创建界面 如图(3).5 

图(3).5

点击Create 填写创建模拟器的相关信息 如图(3).6

图(3).6

我们在这里选的 CPU/ABI 是 arm64-v8a的架构。Target 选择的是Android 7.0-API  再次之前安装环境比较慢, 只安装了Android 7.0API、Android 7.1API ,我们先创建7.0的 ,
重要的事情说三遍,确保已经勾选了Use Host GPU ,否则模拟器非常慢,确保已经勾选了Use Host GPU ,否则模拟器非常慢,确保已经勾选了Use Host GPU ,否则模拟器非常慢。
填写完信息信息,接下来启动我们的Android模拟器 ,是不是非常激动,没做过安卓的是不是感觉好神奇,如图(3).7

图(3).7

下面就马上出现神器的模拟器界面如 图(3).8,咱们的RN环境搭建也马上进入尾声了。

图(3).8

如果愿意的话,你可以创建多个AVD,Android设备种类繁多,有不同的屏幕尺寸,分辨率和功能,因此使用不同的模拟器通常能为测试带来帮助。当然我们前期以学习为目的,就先安装一个。

到此为止React Native 环境搭建完毕,有不懂的可以给我留言,希望能够帮到大家,我也是边学边写一些技术博客,分享给大家。
我将会在下一篇:创建第一个RN应用。



相关文章

  • 1、RN跨平台开发——环境搭建

    了解React Native React Native使你能够在Javascript和React的基础上获得完全一...

  • React Native开发流程

    RN开发流程 目标: 3月1日—4月14日,熟悉整套开发流程,并输出文档教程。 RN环境搭建 RN环境搭建请参考以...

  • 目录内容介绍

    三个阶段: 1、iOS进阶开发 多线程 网络 密码学 2、跨平台开发 HTML5入门开发 跨平台开发(RN技术 (...

  • React Native开发和调试工具

    目标平台:Android。按照官网教程搭建开发环境(RN中文网教程:http://reactnative.cn/d...

  • 前端技术:React详解

    1.RN简介 React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架...

  • java基础知识

    一张图看懂java的跨平台原理: java开发环境的搭建必备概念 搭建java开发环境先明白两个名词:JRE(Ja...

  • mac下搭建android 开发环境

    最近在进行基于Cordova的跨平台开发,需要搭建安卓开发环境,特记录一下 1.安装JDK 2.配置JDK环境变量...

  • Dart编程语言入门

    应用场景: Web开发 跨平台移动应用开发(flutter) 脚本或服务端开发 开发环境搭建: SDK安装: Wi...

  • Flutter 学习之路(一)Dart语言

    入门: 在macOS上搭建Flutter开发环境Flutter 的安装 课程安排 Flutter 简介 :跨平台技...

  • RN搭建开发环境

    RN搭建开发环境 1.安装依赖软件: Node.js 8.3以上 D:\Progr...

网友评论

  • 冷凝LN:屌屌的:smile:
    百事小武:@冷凝LN 刚有这个想法, 接下来一步一步 边学边更新博客,会写一些小的项目。

本文标题:1、RN跨平台开发——环境搭建

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