如何使用react做安卓app

如何使用react做安卓app

一、首先,我们先创建一个react项目作为演示。

1. 全局安装create-react-app

# 全局安装
npm install -g create-react-app

2. 构建一个my-app的项目

npx create-react-app my-app

3. 打开package.json文件,添加honepage配置

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
+ "homepage": ".",
  ...
}

4. 编译打包react项目

cd my-app
npm build

二、然后我们创建一个Hbuilder项目

文件 > 新建 > 移动app > 选择空模板

三、替换文件

创建完移动app之后,然后把之前打包编译过的build文件夹里面的文件全部放入这个移动app文件夹

如果有些自带的空文件夹不需要,可以把他里面的一些空文件夹删除

四、打包应用

准备就绪了之后,然后选中这个移动app项目,点击Hbuilder编辑器上面菜单的 发行 > 云打包-打包原生安装包

1.jpg

选择安卓,然后点击打包,(如果出现打包按钮为禁用,灰色的状态,那应该就是manifest.json文件没有配置好,按照提示配置即可)

点击上面图片打包之后,Hbuilder会在云端生成一个apk文件,等系统生成完了之后,直接下载生成完之后的apk文件,然后安装到安卓手机上即可。

Image placeholder
前端答疑
未设置
  53人点赞

没有讨论,发表一下自己的看法吧

推荐文章
如何用react做增删

如何用react做增删1、使用react做一个输入框,点击提交在下面列表展示,点击对应的列表项,删除该项,如下:2、项目的数据结构,首先分析需求,一个input框,一个button,一个列表。可以把i

如何用react做一个表格

如何用react做一个表格1、首先使用React.createClass方法创建一个组件;2、在render中通过React.DOM创建table、tr、tbody标签;3、在tr标签中使用map方法

如何使用react开发项目

如何使用react开发项目1、环境搭建开发react项目,环境搭建是第一步,react开发需要搭建nodejs环境,因为使用官方的脚手架搭建项目最为简单,而脚手架和webpack依赖于nodejs。w

如何使用react native

如何使用reactnative一、首先安装react-native-cli脚手架工具npminstall-greact-native-cli二、使用react-native-cli创建一个初始化的工程

当金融科技遇上云原生,蚂蚁金服是怎么做安全架构的?

蚂蚁金服在过去十五年重塑支付改变生活,为全球超过十二亿人提供服务,这些背后离不开技术的支撑。在2019杭州云栖大会上,蚂蚁金服将十五年来的技术沉淀,以及面向未来的金融技术创新和参会者分享。我们将其中的

如何下载使用react.js

如何下载使用react.js一、下载react.js、react-dom.js和babel.js在浏览器中输入这三个地址,将得到的页面全选后复制粘贴到本地的文件中,分别对应react.js、react

如何用react写页面跳转

如何用react写页面跳转1、使用react-router-dom中的Link实现页面跳转一般适用于,点击按钮或其他组件进行页面跳转,具体使用方式如下:import{Link}from'react-r

如何用react写轮播?

前提:安装好Node.js安装。【推荐阅读:nodejs怎么下载安装?】步骤:1、安装swiper使用node包管理器npm来安装swipernpminstallswiper--save2、在轮播组件

如何引用react-dom

如何引用react-dom引用react-dom很简单,首先你需要创建一个react项目,这里我们介绍两种方式,第一种是使用npm来创建,另一种是采用script标签引入react的方式创建项目。●使

如何用react构建单页面

如何用react构建单页面react构建单页面需要使用react-router-dom库,所以我们需要先安装npminstallreact-router-dom-S下面以一个例子讲解,react构建单

怎么用react写界面

怎么用react写界面用react写页面,官方的做法是采用jsx语法,JSX是一种JavaScript的语法扩展,运用于React架构中,其格式比较像是模版语言,但事实上完全是在JavaScript内

怎么用react写登陆框

怎么用react写登陆框1、创建一个Login组件,添加userName和userPassword状态;2、为输入框绑定onChange事件到changeUsername和changePassword

用react怎么做移动端

用react怎么做移动端1、首先使用create-react-app脚手架创建react项目;2、然后打开index.html文件,在头部添加meta元数据,设置用户网页的可视区域宽度为设备的宽度,初

用react怎么插图片

用react怎么插图片1、img标签引入图片因为react其实是通过js的reader函数渲染的页面,所以直接写src=“路径”是无法引入图片需要用下面的方式引入2、背景图片引入1第一种就是常规的新建

如何利用Reworld做一个一键吸空投箱的效果

功能效果展示运行环境Win7,Win8,Win10Reworld版本体验版vc_redist.x64运行环境针对零基础读者的补充下载安装Reworld对应版本Reworld官网链接:http://ww

react中如何使用组件

react中如何使用组件前文我们介绍过了《如何写react组件》(感兴趣的同学可以过去学习),下面我们来说一下如何使用react组件。1、无状态组件的使用方法组件:constApp=(props)=>

react如何使用css?

react如何使用css?在react中使用css有以下几种方法一、全局使用app.jsimportReactfrom'react'; importRouterfrom"./router" impor

深入浅出百亿请求高可用Redis(codis)分布式集群揭秘

摘要:作为noSql中的kv数据库的王者,redis以其高性能,低时延,丰富的数据结构备受开发者青睐,但是由于redis在水平伸缩性上受限,如何做到能够水平扩容,同时对业务无侵入性是很多使用redis

谷歌限制华为使用安卓服务!任正非首次回应美国禁令:半导体不卖给我们也没关系

大数据文摘编辑部出品5月19日,路透社援引单一匿名信源报道称,Google已经停止与华为之间除了开源以外的一切业务。也就是说,谷歌公司已经暂停了与华为公司的商业往来。据路透社报道:“华为只能使用安卓系

简单使用rpm命令

课程推荐:Python开发工程师--学习猿地--送9个上线商业项目 安装rpm-ivhhttpd-2.4.6-67.el7.centos.x86_64.rpm -iinstall安装-vverbose

最新安卓零日漏洞被曝出,或影响谷歌、华为和小米等品牌手机

近日,据外媒BleepingComputer报道,谷歌威胁分析团队(TAG)称,一个最新的安卓0day漏洞或被用于攻击谷歌Pixel、华为、小米和三星以及OPPO等智能手机。 该漏洞是由谷歌Pro

安卓被曝的严重漏洞是什么?

相信涉及用户隐私的网络安全问题,一直都是大家关注的焦点。近来,安卓被爆存在严重漏洞。那么,安卓被曝的严重漏洞到底是什么呢?原来,在安卓系统的相机App中,以色列的一家安全公司发现恶意软件可以通过存储访

别小瞧了 Linux,安卓、华为的自研系统,均源自 Linux!

众所周知,目前国内已有众多的国产系统,基本上均源自linux,以linux为基础进行二次开发。比如红旗linux、深度等等。但不知道为什么,一说起某系统是基于linux而来,很多网友就瞧不起,并且会觉

华为鸿蒙来了!八大亮点超越安卓,特殊情况随时可用!

大数据文摘编辑部出品鸿蒙OS来了!8月9日,在广东东莞举办的华为开发者大会HDC.2019上,华为消费者业务CEO余承东正式发布了“面向未来、多终端能力共享的操作系统”——鸿蒙HarmonyOS。鸿蒙