React-Native从搭建环境到 发布 APP 指北
开始前的话语:
1、由于andriod studio不易下载,并且占用内存大,运行的AVD模拟器非常迟钝。所以本文采用genymotion模拟器搭建,它更加轻量,运行更流畅。
2、由于很多学习react的用户,都是在windows电脑上开发,完了顺便学习下react-native,所以本文是用于搭建android环境的(mac电脑没钱买,但不好意思说)
开发环境要求:
Node 的版本必须高于 8.3,
Python 的版本必须为 2.x(不支持 3.x),
而 JDK 的版本必须是 1.8(目前不支持 1.9 及更高版本)
android版本为9(由于最新的react native默认为9,其实其他版本也行,但要改配置,比较麻烦)
一、环境搭建
1、jdk下载及其环境变量配置
如果学过java,则忽略本步骤。如果小白,则继续阅读
点击JDK官网,下载对应版本的jdk,然后双击安装。然后一路“下一步”。
默认会安装在C盘 C:Program FilesJavajdk1.8.0_201 路径下
配置环境变量
桌面-->我的电脑-->右键——>属性
点击"高级系统设置"
点击"环境变量"
编辑用户变量Path
新建,将刚才安装的jdk路径复制到输入框中。最后别忘了,点击“确定”关闭对话框。
然后打开cmd,输入
>java -version
如果出现版本号,则说明jdk配置完毕。
2、python下载及其环境变量配置
进入Python官网下载对应版本,然后双击安装,默认一路“下一步”
类似jdk环境变量,将python的安装路径,配置到环境变量中。
3、SDK下载
虽然我们不需要android studio来开发react-native,但是在启动react时,如果启动的是android,则还是要sdk包的支持和编译。才能将app安装到genymotion模拟器中运行。
我们只需要下载sdk manage来管理sdk包,可以不用任何翻墙和代理,即可下载。速度还很快
这是我的sdk manage的百度网盘地址:
链接:https://pan.baidu.com/s/1uUmz...
提取码:m3fl
下载完,双击安装,一路"下一步"。
然后配置sdk的环境变量,但是需要注意,不是加入到path中,而是新建个名为ANDROID_HOME的变量,
然后将刚才sdk安装的路径设置到变量值中
然后,进入到sdk安装目录,找到s
并双击打开。
找到android 9,展开
勾选这两个,然后点击右下角install packages,稍微等待会,即可看到这两个包后面的"not installed"变成了"installed"
二、Genymotion模拟器下载
genymotion官网
下载前,必须要注册账号,并登陆。
登陆成功后,点击右上角红色的"Download"
由于我们是个人用户,所以往页面下方拉,会看到"Get Genymotion personal version",点击进入下载。
下载上方的包含有VirtualBox的版本。
下载成功并安装。
启动桌面上的"Genymotion"快捷方式,打开genymotion.
进入setting
首先登陆
配置ADB中的sdk为刚才安装sdk的目录。然后关闭
选择android 9版本的模拟器,并安装
模拟器安装成功后,start启动
出现如下的页面,即可表明启动成功。
三、react native项目创建
首先安装react-native-cli
>npm install -g yarn react-native-cli
然后使用init,创建项目,官网实例名为AwesomeProject,咱们也用这个吧。
react-native init AwesomeProject
进入AwesomeProject项目
cd AwesomeProject
react-native run-android
即可在模拟器上看到react-native中的内容
使用vscode打开AwesomeProject项目,打开App.js,在render中稍微修改文字,并打开genymotion模拟器,双击键盘R键(自己办公桌的键盘,不是genymotion模拟器的软键盘),即可刷新模拟器上的页面。
同时,在android的outputs文件夹下,可以编译好的apk,但是这个apk是没有经过数字证书认证的,无法发布到应用商店的。
四、采用数字证书编译App
使用管理员权限打开cmd命令行工具,然后进入到jdk的bin目录:
C:Program FilesJavajdk1.8.0_201bin 目录
然后再控制台输入如下命令:
keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
然后会提示你输入秘钥密码,地区,行政区,国家等等,完成后。在bin目录下会有个
my-release-key.keystore文件
将次秘钥文件复制到react native项目的androiud/app下
修改gradle.properties文件,加入如下代码:
MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****
注意**部分要用你刚才申请秘钥时输入的密码替换
进入android/app/build.gradle中,编辑文件,新增红色部分。
然后进入到android目录下,输入命令。
gradlew assembleRelease
即可使用数字证书来打包app,成功后,会在apk下多出来一个realese文件夹(如果没有,点击右上角刷新)
为了确保发布到应用商店的apk没有问题,我们还得把这个apk在genymotion模拟器上运行下,来简单测试下
输入命令
>react-native run-android --variant=release
即可在模拟器上,看到有个app被安装上了。
React-Native从搭建环境到 发布 APP 指北相关推荐
- React Native 一:开发环境搭建
在学习React Native的过程中,相信对于一个App开发工程师,没有充分的学习过前端开发技术的同学来说,顺利的搭建好开发环境还是比较纠结的. 下面,我就根据我自己学习过程中的总结,跟大家讲解讲解 ...
- Android之Windows下搭建React Native Android开发环境(差不多搞了一天)
Android之Windows下搭建React Native Android开发环境 穷逼买不起mac,但是他们都说React Native Android只能在mac下面 ...
- 在windows下搭建React Native Android开发环境
1.登录 React Native 中文网 http://reactnative.cn/docs/0.45/getting-started.html 2.登录 Chocolatey 下载包管理工具 h ...
- React Native+Node.js 开发的课程表app项目笔记
在做项目之前,首先要把React Native 的环境搭建好,这里我就不多做阐述,RN中文网步骤说的挺清楚的,就跟着配置就好. http://reactnative.cn/docs/0.... 一.总 ...
- react native windows 搭建(完整版)
声明:用windows 搭建的react native只能开发安卓应用 1.准备安装java jdk,以及Android SDK 传送门: java JDK Android SDK(自行寻找) ...
- React Native 实战:构建电商 App
课程介绍 React Native 充分利用了 Facebook 的现有轮子,是一个很优秀的集成作品,使用 RN 即可做到无需编译就能远程热更新 App,再加上友好的开发方式.快到爆炸的开发效率.RN ...
- React Native开发的博客园App
利用React Native花了大概3周的业余时间开发出这一款较完善博客园App,目前只是测试版本(v1.0.0),不过大致的功能都已经完善,如果大家有兴趣有问题可以下面反馈 安卓: 请前往 酷安ht ...
- React Native For Android 环境搭建
一. 环境搭建 1. JDK更新 http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html 使用最新的 ...
- 在Windows下搭建React Native Android开发环境常见问题
1. task ':app:compileDebugJavaWithJavac'. > Could not find tools.jar 是没有配置Java环境 D:/Java\jdk1.8.0 ...
- React Native零基础+React Native重入门到精通+混合APP完整版
第1章 介绍课程目标和学习内容 包括课程概述.课程安排.学习前提.讲授方式等方面的介绍,最后演示了整个招聘App的功能,让同学们对课程项目有一个直观的了解. 1-1 课程导学 第2章 知识储备 2-1 ...
最新文章
- java中有符号数和无符号数,C语言中无符号数和有符号数之间的运算
- python中怎么输出中文-python中使用print输出中文的方法
- Customization larbin
- 学习iBatis时的一个苦逼经历
- Android之自定义View的实现
- mysql简单分表_mysql分区分表哪个好
- PHP面向对象 封装与继承
- 2020移动应用设计流行素材|交互动画
- java 阿里线程池_为什么阿里不允许使用 Executors 创建线程池?
- Excel乱码的解决方法
- python黑帽子怎么样_PYTHON 黑帽子第二章总结
- 人脸识别常用数据集大全
- 概率论与数理统计-课程感悟
- 视频一键识别生成字幕
- Securing Android: A Survey, Taxonomy, and Challenges --论文笔记
- 抖音极速版自动运行脚本
- html doc全称,html标签全称与功能介绍.doc
- 【优化求解】基于生物地理学结合重力引力搜索优化求解算法matlab代码
- 高通 thermal子系统
- 计算机的快速启动栏,电脑快速启动栏不见了
热门文章
- jvm中的新生代Eden和survivor区
- latex 插图排版
- bitnami_redmine3.3.0-1 问题及备份恢复
- java remote debug parameters
- matlab图片文件批量处理
- AudFree Tidable Music Converter for Mac - 音乐格式转换软件
- Mac技巧:如何使用macOS Big Sur中“通知中心”的小组件?
- CentOS7 Docker 安装 PHP,Mysql,phpmyadmin
- sprint test 添加事务回滚机制
- Scrum实践:每日站会