React-Native 准备工作篇(Android项目)

React-Native 准备工作

1.环境准备: node、Python2x、JDK和 Android Studio。

注意Node的版本应大于等于 12,Python 的版本必须为 2.x(不支持 3.x),而 JDK 的版本必须是 1.8(目前不支持 1.9 及更高版本,注意 1.8 版本官方也直接称 8 版本)。安装完 Node 后建议设置 npm 镜像(淘宝源)以加速后面的过程(或使用科学上网工具)。

使用cmd设置淘宝源


注册淘宝源完成


切换回官方






2. 软件简介

    Node:简单的说 Node.js 就是运行在服务端的 JavaScript。

    Node.js是一个基于Chrome JavaScript 运行时建立的一个平台。

    Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引 擎执行Javascript的速度非常快,性能非常好。

    node官方文档:http://nodejs.cn/api/

    Python2x:跨平台的计算机脚本语言

    JDK : java编译环境在RN中的作用在于,提供给android studio用于android开发.

    Android studio: android开发工具

3. 编译react-native项目

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

    创建项目

cd到指定文件夹创建项目npx react-native  init name

此时可能会出现如下错误: Cannot initialize new project: because directory“my”already exists.意思是无法创建新项目,因为文件目录下存在文件夹


也就是我们需要重新命名项目、再次运行,可以看到如下,已经开始创建项目了


项目已经创建完毕,分别有IOS、Android、PC三种,可以看到Android官方已经提供了提示npx ract-native run-android 来运行项目



到此,我们的项目已经创建完成,接下来我们需要开发项目则需要,将此项目添加到开发工具中


调试运行

运行项目有两种方式:(注意:无论使用哪种需要优先使用cmd命令运行项目一次)

①使用android studio

首先打开Android Studio

找到我们刚刚生成的项目导入


导入之后可能会提示

这里配置之后可能会遇到一些gradle的问题,只要保证本地存在或者按照提示下载gradle配置相应版本即可,这里就不多说了.

运行项目

② 使用cmd运行命令npx react-native run-android 来运行项目

注意: 不要使用bundle来编译,会导致js文件无法刷新:

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res  

可以看到此时正在安装项目,其中有个erro意思是加载我们的设备失败,也就是我们需要将手机连接到电脑,并开启usb调试模式.

选择安装方式根据自身情况可选择,两种方式均可实现启动项目.

注意:运行方式不可交叉使用会导致build文件错误,解决方法将build删除重新rbuild

最后运行出现build successful说明安装成功


运行示例截图
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
禁止转载,如需转载请通过简信或评论联系作者。
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,384评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,845评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,148评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,640评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,731评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,712评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,703评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,473评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,915评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,227评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,384评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,063评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,706评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,302评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,531评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,321评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,248评论 2 352