文档章节

React Native macOS Android 搭建开发环境

帝子兮
 帝子兮
发布于 2018/12/03 16:56
字数 1002
阅读 49
收藏 0

这个讲的是React Native完整的原生开发环境。

这个环境的搭配,会根据你使用的操作系统、针对的目标平台不同,具体的搭配步骤就会有所不同;如果想同时开发iOS和Android也是没有问题的,你需要先选一个平台开始,对于另一个平台的环境搭建只是稍有不同。

开发平台:macOS、Windows、Linux       

目标平台:iOS、Android

React Native macOS  Android 搭建开发环境:

(1)安装依赖

必须安装的依赖有:Node、Watchman和React Native命令行工具以及JDK和Android Studio。

虽然可以使用任何的编辑器来开发应用(编写js代码),但你仍然必须安装Android Studio来获得编译Android应用所需的工具和环境。

我们推荐使用Homebrew来安装Node和Watchman,在命令行中执行下列命令:

brew install node
brew install watchman

注意:如果你已经安装了Node,请检查其Node版本是否在v8.3以上;安装完了Node后建议设置npm镜像以加快后面的过程。

还有需要注意的是不要使用cnpm安装!!!,因为cnpm安装的模块路径比较奇怪,packager不能正常识别。

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

Watchman则是由Facebook提供的监视文件系统变更的工具,安装此工具可以提高开发时的性能(packager可以快速捕捉文件的变化从而实现实时刷新)。

Yarn、React Native的命令行工具(react-native-cli)

Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。

React Native的命令行工具用于执行创建、初始化、更新项目、运行打包(packager)等任务。

npm install -g yarn react-native-cli

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

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

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

Java Development Kit

React Native 需要 Java Development Kit [JDK] 1.8(暂不支持 1.9 及更高版本)。你可以在命令行中输入

javac -version来查看你当前安装的 JDK 版本。如果版本不合要求,则可以到 官网上下载。

Android 开发环境

如果你之前没有接触过 Android 的开发环境,那么请做好心理准备,这一过程相当繁琐。请万分仔细地阅读下面的说明,严格对照文档进行配置操作。

译注:请注意!!!国内用户必须必须必须有稳定的翻墙工具,否则在下载、安装、配置过程中会不断遭遇链接超时或断开,无法进行开发工作。某些翻墙工具可能只提供浏览器的代理功能,或只针对特定网站代理等等,请自行研究配置或更换其他软件。总之如果报错中出现有网址,那么 99% 就是无法正常翻墙。

1. 安装 Android Studio

首先下载和安装 Android Studio,国内用户可能无法打开官方链接,请自行使用搜索引擎搜索可用的下载链接。安装界面中选择"Custom"选项,确保选中了以下几项:

  • Android SDK
  • Android SDK Platform
  • Performance (Intel :registered: HAXM)
  • Android Virtual Device

然后点击"Next"来安装选中的组件。

如果选择框是灰的,你也可以先跳过,稍后再来安装这些组件。

安装完成后,看到欢迎界面时,就可以进行下面的操作了。

 

 

© 著作权归作者所有

帝子兮
粉丝 2
博文 44
码字总数 23348
作品 0
程序员
私信 提问
🍋 React-Native 官方示例演示 ( ios & android)

React-Native-Demo是基于 react-native 官方文档,把文档所列出的基础组件(简洁、易用、高效) 和 API 实现一遍,并以演示的形式呈现出来。 目的是为了直观的熟悉官方提供了哪些能力,使之更...

cllemon
04/27
0
0
LuaScriptCore v2.0.0 发布,移动端 Lua 桥接框架

LuaScriptCore旨在能够在多种平台上方便地使用Lua。其提供了与各种平台的功能交互,让开发者无须关心Lua与各个平台之间是实现交互的细节,只需要根据自己的业务需求,使用LuaScriptCore提供的...

vimfung
2017/12/05
1K
1
Google Chrome 71将获得原生黑暗模式 但暂时仅适用于macOS

每个人都喜欢黑暗的主题?好吧,也许不是每个人,但很多Android爱好者都是原生黑暗模式的粉丝。谷歌最新的Material Theme有些应用已经采用了黑暗模式。 YouTube和Android内置消息应用是最新的...

稿源:
2018/09/22
0
0
android maven lion

1、配置环境变量: ~/.bash_profile export JAVAHOME=/Library/Java/JavaVirtualMachines/jdk1.7.010.jdk/contents/Home ~/.bash_login export ANDROIDHOME=/Developer/android-sdk-macosx ......

z.net
2013/06/23
180
0
高手问答第 168 期 —— macOS 软件安全与逆向分析

OSCHINA 本期高手问答(2017 年 8 月 30 日 — 9 月 5 日)我们请来了非虫老师 @fei_cong 为大家解答 macOS 系统中安全方面的问题。 丰生强,网名非虫,独立软件安全研究员,资深安全专家,I...

局长
2017/08/29
2.9K
54

没有更多内容

加载失败,请刷新页面

加载更多

mac下redis安装、设置、启动停止

常用命令说明 redis服务器:redis-server redis客户端:redis-cli redis性能测试工具:redis-benchmark AOF文件修复工具:redis-check-aof RDB文件修复工具:redis-check-rd redis设置临时密...

botkenni
15分钟前
3
0
好程序员web前端分享HTML5常见面试题集锦四

好程序员web前端分享HTML5常见面试题集锦四 1、为什么要初始化CSS样式? 答案:因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面...

好程序员官方
16分钟前
2
0
CDN的网络架构是什么?

CDN网络架构主要由两大部分,分为中心和边缘两部分,中心指CDN网管中心和DNS重定向解析中心,负责全局负载均衡,设备系统安装在管理中心机房,边缘主要指异地节点,CDN分发的载体,主要由Cac...

云漫网络Ruan
16分钟前
2
0
pandas入门07---可视化

01 入门 制作提供信息的可视化是数据分析的重要任务之一。首先介绍一下matplotlib库。 import matplotlib.pyplot as pltimport numpy as npdata = np.arange(10)print(data)plt.plot(da...

筠初
17分钟前
2
0
201_PyTorch中文教程:Torch与Numpy互操作

201_PyTorch中文教程:Torch与Numpy互操作 Numpy是经典的数学计算库,Torch中的Tensor可以与之互相转换,从而可以充分利用二者的计算函数和模型,以及使用其它支持Numpy的软件库和工具。但需...

openthings
18分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部