taro 编译React-Native安卓端流程

taro转rn-ios(个人记录,第一次搞,有误请指正:)) 使用的多端框架taro,目的是开发一个ios应用,刚开始打算使用taro-ui,但是集成后发现taro-ui不支持rn,所以继而转向ant design mobile rn。 在使用ant design组件中,使用Icon会提示缺少字体文件 Unrecognized font family ‘antoutline’ 这个时候需要去项目的node_modules下@ant-design下面的icons-react-native下面的fonts下面的antfill.ttf、antoutline.ttf找到这俩 阅读详情

1 . 根据官网文档,安装并配置Node、Watchman、react-native cli、Android Studio工具

2 . 新增环境变量ANDROID_HOME 、PATH路径

3 . 在Android Studio创建模拟器

4 . 在项目根目录下运行npm run dev:rn编译代码至RN,若出现style相关的错误,则是因为你的代码不符合RN端的约束,导致编译失败,例如内联样式style="width:20;margin-right:10"要写成RN支持的形式style={{width:20,marginRight:10}},具体样式的约束请参考文档

5 . 编译完成若未自动打开浏览器,则在项目根目录下手动运行react-native start启动Metro Bundler Server, 若8081端口被占有,则加入--port = 端口号指定端口,打开浏览器,访问http://127.0.0.1:8081,可以看到画面。打开http://127.0.0.1:8081/rn_temp/index.bundle?platform=ios&dev=true,则开始打包

6 . 官网上可以自己整合RN到原生应用,也可以使用官方的壳子,使用壳子时,若出现错误,需要更新npm包到如下版本

7 . 若react-native start时更改过运行端口port,那么模拟器的请求端口也需要做对应的修改

8 . 当debug模式正常,打包apk安装到真机后闪退问题,可能是index.android.bundle没有正确生成或生成路径错误,参考这篇文章解决,除此之外,项目代码有错误也有可能导致闪退


如果觉得这篇文章帮助了您,请打赏一个小红包鼓励作者继续创作哦!!!

在这里插入图片描述

关于Taro3.0如何使用React-Native的Pushy以及android打包 本次问题点 关于Taro3.0如何Android打包? 如何使用pushy? Taro3.0如何Android打包? -将 Taro 代码编译成相应平台的 jsbundle 文件 taro build --type rn --platform ios taro build --type rn --platform android 然后会在app/src/main/assets/xxxxx.byndle文件 然后在MainApplication.java文件中getJSMainModuleName() 阅读详情

相关推荐

小程序跨端开发框架选型指南:从uni-app、Taro到原生开发的深度解析

跨端开发是前端工程中的重要实践,旨在通过一套代码实现在多个平台(如小程序、H5、App)的高效部署。其核心原理通常基于统一的语法规范(如Vue或React)和运行时编译,将开发者编写的代码转换为各平台原生可执行的格式。这种技术能显著提升开发效率,降低多端维护成本,尤其适合需要快速覆盖微信、支付宝、百度等多个流量平台的业务场景。在实际应用中,开发者需根据团队技术栈、目标平台范围、性能要求及生态成熟度进行综合选型。例如,基于Vue生态的uni-app以其丰富的插件市场和全端覆盖能力,成为许多项目的务实选择;而基

weixin_30336061的博客 342

RN开发系列<2>--基本调试

基本调试

JH_Cao的博客 1175

Vue跨端原生开发实战:从React Native到Lynx的技术选型与实现

跨平台开发是提升前端工程效率的关键路径,其核心原理在于通过统一的开发语言和框架,将代码编译或转换为不同平台的原生组件,实现一次编写多端运行。这项技术的核心价值在于大幅降低多端应用的开发与维护成本,同时保持接近原生的性能体验。在实际应用中,开发者常基于Vue.js等主流前端框架生态进行技术选型,例如通过vue-native-core将Vue组件编译为React Native应用,或采用Lynx等高性能自研引擎实现跨端渲染。本文聚焦Vue for Native这一具体场景,深入对比基于React Native生

weixin_30615767的博客 432

运行别人写的react native项目demo到安卓模拟器上问题

运行Demo步骤: 下载react native项目demo 终端打开项目目录,执行yarn install或npm install 打开Android Stadio,启动安卓模拟器 运行在安卓模拟器上:react-native run-android 我遇到的问题: 在终端执行react-native run-android,提示License for package Android SDK...

JR的博客 973

多端统一开发-Taro的安装与使用

Taro Taro是一套遵循React语法规则的多端开发解决方案。目前市面上已经有各式各样的小程序、h5和安卓、ios端,如何解决一次开发,多端运行已经成为开发者目前迫切需要解决的难题。而使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信/百度/支付宝/字节跳动小程序、H5、React-Native 等)运行的代码。 环境 Taro 是一个基...

我的小熊不见了 827

Taro打包Android apk

首先,我们使用使用命令创建模板项目,创建的命令如下。 taro init myApp 然后,使用 yarn 或者 npm install安装依赖包,并使用下面的命令编译Taro项目。 yarn dev:rn 启动后会开启一个监听的进程,如下图。 不过,细心的你可能会发现,使用taro init命令初始化的项目是没有原生模块支持的,原来Taro使用了一个壳子工程,首先使用下面的命令下载壳子工程taro-native-shell,如下所示。 git clone git@github.com:NervJS/

xiangzhihong8的专栏 1364

Taro3.2 适配 React Native 之运行时架构详解

导读 由 58 前端团队主导的 Taro 3 适配 React Native 工作已完成有一段时间了。目前发布了多个体验版,也将在3月底迎来正式版。基于 Taro 的良好架构演变,适配 React Native 的方案的也做了较大调整,本文将主要介绍 Taro 3 适配 React Native 运行时相关的详细设计与实现。 背景 Taro 已经进入3.0 时代,相对于 Taro 1/2 来说,采用重运行时架构,可以让开发者能够获得完整的 React/Vue 等框架开发体验,因此,我们在设计 Taro3 R

开源世界 2738

一个taro适配Android、iOS、微信小程序、H5最佳实践项目的脚手架

技术栈 typescript+eslint+redux+taro+react-native+mock taro适配Android、iOS、微信小程序、H5最佳实践,主要涉及到了基础网络请求的封装、适配了多端的SafeArea安全区域、style工具样式引用替换scss的繁琐写法大幅度简化代码,同时解决了scss样式无法通过className进行属性传递的问题、自定义tabBar、全局模态对话框展示(解决了微信小程序端不能覆盖底部tabBar的问题)、展示了相同组件多端适配引用的方式、多端样式布局通过styleAssign注入flex、column、relative的方式实现统一化、演示了app的消息通信,通过mock数据在本地搭建服务进行前后端分离开发、本脚手架各端适配的比较完美适合用来进行全新项目的多端开发,后续基础组件持续完善中,目标是打造一个多端共用的基础组件库. 适配进度 H5 -- 完美适配 React Native -- 完美适配 微信小程序 -- 完美适配 目标功能 打造一个多端共用的基础组件库 -- 持续开发完善中 用法: 先打开本地mock服务命令:

Taro React Native 端开发流程

本篇主要讲解 Taro React Native 端 环境安装-开发-调试-打包-发布 原理及流程,React Native 开发前注意事项请看 开发前注意 简介 Taro 移动端的开发基于 Facebook 的开源项目 React Native,Taro3.x 将不再锁定 React Native 版本,用户可在项目中自行安装 >=0.60 版本的 React Native...

一缕清风 870

常用本体建模工具

常用本体建模工具: Apollo、OntoStudio、TopBraid Composer、Semantic Turkey、Knoodl、Chimaera、OliEd、WebODE、Kmgen和DOME Protégé Protégé[1]是一款由斯坦福大学编写并维护的开源本体建模和编辑工具,其支持Web版本和PC版本,使用OWL语言(关于OWL的详细介绍可参看前文2.1节内容)对知识进行表示,读者可以通过Protégé的官方网站访问Web版本或下载桌面版本。Protégé最早开发于1987年,最初目的是

qq_40503347的博客 6165

(1)大蚂蚁即时通讯

即时通讯软件BigAnt(大蚂蚁)是杭州艾朴软件推出的一个”企业级”的即时通讯平台。该平台专为企业,其他企事业单位和政府单位而设计,目的就是为了增强内部沟通能力,提高内部员工的工作效率;同时服务器就直接置于单位内部,所有信息由单位自己管理,让单位以更安全、更可伸缩和更易于管理的方式灵活方便地使用协同和通信服务的功能! BigAnt(大蚂蚁)即时通讯软件包括服务器端和客户端。客户端功能包括单位

少安的砖厂 2234

uni-app、taro、flutter、kbone 跨端、小程序选型对比、区别

本文只代表本人观点,在自己的一些实践经验上的出的粗浅结论。也只适合在公司目前业务所得出的方案,仅供参考,可能随着技术的发展,其他框架也会越来越好。 一、背景 随着移动互联网的百家争鸣,越来越多的“端”如雨后春笋快速兴起,安卓、ios、鸿蒙和各种小程序等。同一个应用,各个“端”独立开发,不仅开发周期长而且人员成本高,不利于团队成员形成合力提高开发效率。这种重复、低效的工作状态直接影响到新品的迭代和发布,在这样的形势下,跨端技术受到越来越多人和企业的关注。 使用跨端方案进行...

qq_35430000的博客 1万+

STM32F103C8T6+TB6612驱动直流电机全攻略(附PWM调速代码)

本文提供了一份基于STM32F103C8T6微控制器和TB6612驱动模块的直流电机驱动完整解决方案。详细解析了硬件连接、STM32CubeMX配置、HAL库驱动代码编写,并附带了PWM调速代码实现。内容涵盖从基础原理到实战调试的全过程,旨在帮助开发者快速构建稳定、可精准调速的电机控制系统,适用于智能车、机器人等嵌入式项目。

weixin_29181861的博客 586

怎么判断一个Android APP使用了taro 这个跨端框架

要判断一个 Android 应用是否使用 Taro 框架,可以通过以下步骤进行验证: 解压 APK:检查 index.android.bundle 文件,查看是否包含 @tarojs 依赖。 搜索关键词:在 JavaScript 代码中查找 Taro.initNativeApi 或 @tarojs/components-rn 等 Taro 特有标识。 验证配置:确认是否存在 app.config.js 或编译后的配置文件,这些文件通常用于定义多端配置。 运行时日志:通过 adb logcat 过滤 Taro

编程小栈 1277

MSP430项目设计:2020年TI杯大学生电子设计竞赛 坡道行驶电动小车(C题)循迹小车(分享项目展示视频与源码)

文章目录题目要求一、硬件设计二、理论分析与计算三、电路与程序设计四、测试方案与测试结果五、项目展示 哔哩哔哩项目展示视频:https://www.bilibili.com/video/BV1oz4y1d7mH/ 百度网盘资料链接:https://pan.baidu.com/s/1PC-lkSORH_XCgIG-u3HCog 提取码:c7zz 取走记得点赞啊! 题目要求 1.任务 利用TI的MSP430/MSP432平台,设计制作一个四轮电动小车。要求小车能沿着指定路线在坡道上自动循迹骑线行驶。小车必须独立

mbs706的博客 4万+

通过Simulink搭建一个智能微电网能量管理系统(Energy Management System, EMS)

通过上述代码实现,您可以逐步创建一个智能微电网能量管理系统。多源能量集成:整合光伏、风力发电、柴油发电机、电池储能等多种能源资源。负荷预测与调度:基于历史数据和天气预报,预测未来负荷和可再生能源输出,进行优化调度。储能系统优化:设计合理的充放电策略,确保储能系统的高效利用和寿命延长。经济性分析:评估不同运行模式下的经济性,考虑电价、维护成本等因素。环境影响评估:分析微电网对环境的影响,如减少碳排放、提高可再生能源利用率等。硬件在环仿真(HILS)

amy_mhd的博客 314

Taro跨端开发入门:从环境搭建到多端发布实战指南

跨端开发框架通过统一技术栈实现多平台应用构建,其核心原理在于编译时进行代码转换与运行时提供API适配,从而显著提升开发效率并降低维护成本。这一技术价值在追求快速迭代和广泛覆盖的移动互联网场景中尤为突出,尤其适合需要同时覆盖微信、支付宝、抖音、百度等多个小程序平台以及H5和React Native的应用项目。Taro作为主流跨端解决方案,其“一次编写,多端运行”的能力精准契合了“流量主”等对开发效率有极致要求的群体需求。本文以Taro为例,详细解析其环境搭建、项目创建、核心工作逻辑及多端适配实战,帮助开发者快

weixin_33951761的博客 761

【Burp入门第三十三篇】BurpSuite+Proxifier安装配置,实现微信小程序抓包

本文介绍Burp+Proxifier安装配置,实现微信小程序抓包

等风来 5873

Taro Native Shell 项目安装与配置指南

Taro Native Shell 项目安装与配置指南 1. 项目基础介绍 Taro Native Shell 是一个基于 Taro 框架的原生 React Native 壳工程。它旨在帮助开发者快速搭建能够同时运行在 iOS 和 Android 平台上的应用。项目主要使用 JavaScript 作为编程语言,通过 Taro 框架提供的 API 和组件,开发者可以方便地实现跨平台应用的开发。 2....

gitblog_01059的博客 854

【系统架构设计师】论文:论虚拟现实技术的应用与发展

虚拟现实技术是当前科学研究的热点,同时也是国家大力支持发展的核心技术之一。所谓虚拟现实,就是通过计算机等虚拟手段来构造一个非常接近真实世界的虚拟环境,它主要体现在视觉、触觉、嗅觉等方面的逼真模拟来达到高度的沉浸性,也就是如我们通常所说的“身临其境”。

数据知道的博客 1万+

179、运动控制中的行业标准:机器人安全标准ISO 10218

今天这篇笔记,就把我踩过的坑和标准里的硬骨头掰开揉碎讲清楚。

m0_50546716的博客 169

Taro跨端开发实战:从环境搭建到多端发布全流程指南

跨端开发框架通过一套代码适配多个平台,其核心原理在于编译时将统一的组件和API映射到不同平台的原生实现,从而显著提升开发效率和维护性。这种技术为追求快速市场验证和商业变现的团队带来了巨大价值,尤其在需要覆盖微信、抖音、支付宝等多个流量入口的场景下。Taro作为主流解决方案,允许开发者使用熟悉的React或Vue语法进行开发,其多端编译能力能有效帮助项目抢占市场先机,并打通流量主等商业化路径。本文将以Taro 4.x和React为例,详细解析从项目初始化、核心概念、样式适配、状态管理到网络请求封装和最终多端编

weixin_30598225的博客 402

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

Taro跨端小程序开发实战:从环境搭建到上线的全流程指南

跨端开发框架是现代前端工程中解决多平台适配挑战的核心技术,其原理在于通过统一的语法规范和编译工具,将一套源代码转换为可运行于不同终端(如微信、支付宝小程序、H5等)的应用程序。这项技术的核心价值在于显著提升开发效率、降低维护成本,并实现“一次编写,多端运行”的工程理想。在实际应用场景中,开发者常面临环境配置、组件化开发、状态管理、多端差异处理和包体积优化等具体问题。本文聚焦于Taro这一主流React语法规范的跨端解决方案,详细阐述了其开发环境搭建、项目初始化、核心开发实践以及构建优化策略。文中深入探讨了如

weixin_33727510的博客 348

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

react-navtive实战记录

本文档基于本项目(demo)实际跑通过的流程整理。按顺序做,不需要其他参考。

EmotionComputer 447

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

Taro Native Shell 项目使用教程

Taro Native Shell 项目使用教程 1. 项目目录结构及介绍 Taro Native Shell 是一个基于 Taro 框架的原生 React Native 壳工程。以下是项目的目录结构及各部分的简要介绍: taro-native-shell/ ├── android/ # Android 平台相关文件 ├── ios/ ...

gitblog_00602的博客 687

使用duxapp开发 React Native App 事半功倍

对于Taro的壳子,或者原生React Native,都会存在 `android` `ios`这两个文件夹,而在duxapp中,这些文件夹的内容是自动生成的,那么对于需要在这些文件夹中修改的配置内容,例如包名、版本号、新架构开关等,都通过配置文件的方式配置了,而不需要需修改具体的文件

qq_40235850的博客 1096
上一篇: html checkBox自定义格式修改
下一篇: D3 二维图表的绘制系列(一)介绍
PAT-python-zjw
博客等级 码龄10年 381粉丝 408原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值