React Native 初入门-->我遇到的那些问题

React Native开发之快速入门React 前言这篇文章,是接着之前的一篇入门文章写的(虽然已经过去大半年了),本文的受众仍然是React小白,熟悉React的同学可以不看了。上一篇文章链接: 为React Native开发写的JS和React入门知识 上一篇文章主要介绍了JS的语言基础和React的component生命周期。本文会接着上一篇文章,继续讲解React的基础。本文的React Native版本是0.0.40,开发IDE是Ato 阅读详情

1:搭建好环境之后,初始化demo,做好一切准备,在命令行输入: react-native run-android,满心欢喜期待我的第一个RN helloworld,结果爆红了

 这样:


经过多方查找,知道这是Android 使用的时候 本身就存在的bug,facebook也给出了解决的方案:

首先:切到你的RN工程目录下

然后:输入以下命令:react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle –-sourcemap-output android/app/src/main/assets/index.android.map --assets-dest android/app/src/main/res/

当然根据你的工程名称不同,路径有一些变动,自行修改

异常:如果没有成功,请自行现在main 文件夹下面新建 assets文件夹,再执行该命令

附加:我除了运行该命令之外还在  package.json 里面的scripts 里面添加了 "bundle-android": "react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle –-sourcemap-output android/app/src/main/assets/index.android.map --assets-dest android/app/src/main/res/",

这个有或者没有我不知道会不会影响,反正现在都添加之后是可以正常运行了。


2:代码修改之后,保存,react-native run-android 运行代码,还是hello world,我一度怀疑是因为有什么缓存啊之类的,clean project / rebuild project /重启大法  ,并无卵用,然后我抱着试一试的心态,重新运行了该命令:

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

好吧,代码就生效了,所以我觉得这个命令是使我们修改代码生效的关键,每次react-native run-android之前请先将该命令运行一下~~



暂时总结到这里,再见。



React Native 二:快速入门 前面我们使用react-native init创建了一个项目,这是一个简单的Hello World App(项目结构如下图)。对于iOS来说,你需要编辑index.ios.js来改变App;对于Android,你需要编辑index.android.js来修改App。然后摇晃菜单中点击Road JS查看改变。下面我们就以Android为例子来尝试修改了App。 阅读详情

相关推荐

从Android到React Native开发①【入门】

前言 大家好┏ (ω)=,许久不见,今天讲讲React Native~(╯‵□′)╯︵┻━┻。 关于React Native是什么,各位可谷歌之,这里主要给大家安利下React Native,总结下一些从Android到React Native相关的概念和基础。来吧,互相伤害啊(˶‾᷄ ⁻̫ ‾᷅˵)。 本文并非讲解入门基础,更多是给Android原生开发学习和理解React Native...

Horace 1689

ReactNative生成android平台的bundle文件命令

注:如果assets文件没有正确生成,需要手机创建或授权 网上的其它的很多都不好用,这个是好用的 进行React Native的根目录下执行以下命令   命令 react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/...

yeputi_WK的博客 8414

ReactJs和React Native的那些事

介绍  1,React Js的目的 是为了使前端的V层更具组件化,能更好的复用,它能够使用简单的html标签创建更多的自定义组件标签,内部绑定事件,同时可以让你从操作dom中解脱出来,只需要操作数据就会改变相应的dom。  2,React Native的目的 是希望我们能够使用前端的技术栈就可以创建出能够在不同平台运行的一个框架。可以创建出在移动端运行的app,但是性能可能比原声app差一点。

xiangzhihong8的专栏 1万+

React-Native Android真机测试 -unable to load script from assets 'index.android bundle'...

在Android 华为手机上运行React_Native工程时出现了如下错误,做以记录: 报错:unable to load script from assets ‘index.android bundle’ ,make sure your bundle is packaged correctly or youu’re runing a packager server 解决报错的方法:第一步:

zhangyanlf的博客 1万+

Modem2G/3G/4G/5G:RFFE Driver(射频前端驱动):高通平台GRFC配置方法

文 | GentlemanTsao 文章目录前言1.什么是GRFC2.GRFC的配置流程概览3.msm_sig_info的配置与分析msm_sig_info Table位置:msm_sig_info Table示例:Table元素解读:rfc_msm_sig_info_type结构体signal typemsm_gpio |grfc_num:GPIO到GRFC的映射output_typefunction_select4._sig_cfg的配置与分析_sig_cfg table位置:_sig_cfg tabl

GentelmanTsao的博客 7315

大疆M3508电机使用CAN通信进行速度PID闭环控制详解

目录一. 简介二. 电机通信协议三. 电机PID控制原理四. 官方代码移植-中断接收五. 官方代码移植-查询接收 一. 简介 之前写过一篇文章STM32实现四驱小车(五)电机控制任务——电机速度PID控制算法,其中是以大疆的M3508电机为例进行讲解的(没错,就是RoboMaster机器人同款电机,不过Robomaster上的电机好像是小一号的M2006)。不少小伙伴私信问我要代码,我都回复说不是有官方demo么。后来问的人多了我大概明白了,看来官方的Demo还是有点门槛。可能是带FreeRTOS操作系统看

qq_30267617的博客 7万+

React Native开发从入门到精通

【代码】React Native 开发从入门到精通学习大纲。

YunWisdom 9202

C#上位机与VisionPro通用框架:视觉标定、通信联动与现场排坑实战

工业自动化设备的上位机开发,往往面临流程控制、视觉检测、通信交互等环节的重复搭建。C#作为主流工业语言,配合VisionPro视觉软件,可通过通用框架设计将状态机调度、相机采集、标定算法与串口/扫码枪通信等底层能力模块化,从而大幅降低项目交付成本。其核心原理在于:将设备工艺差异封装至配置层,视觉流程通过CogToolBlock工具链与VPP模板复用,九点标定建立像素与机械坐标系的映射关系。该方案已在螺丝锁付、点胶定位等多类产线落地,尤其适用于批量交付、换型频繁的视觉设备场景。这套从实践中沉淀的框架思路,以及

weixin_31102231的博客 338

React Native 快速入门指南

React Native快速入门指南提供了跨平台移动开发的全面介绍。主要内容包括:环境搭建(Node.js、Android/iOS开发工具安装)、项目结构说明(App.js等核心文件)、应用创建与运行(CLI和IDE两种方式)以及调试技巧(Chrome DevTools)。特别对比了React Native与Flutter等技术特性,突出了其接近原生性能和使用JavaScript开发的优势。指南还详细介绍了如何将React Native集成到现有原生应用中,为开发者提供了从零开始到项目实践的完整路径。

REDcker的博客 1811

跨平台也要跑得像原生一样顺:SAP GUI for Java 的安装、配置、运维与自动化实战

摘要:SAP GUI for Java 作为跨平台客户端解决方案,在 S/4HANA 时代仍发挥关键作用,特别适用于 macOS/Linux 环境下的 ABAP 开发和系统运维。其主要优势包括:平台无关性(支持 Windows/macOS/Linux/UNIX)、与 Windows 版本一致的交互体验、对核心事务码(如 ST22/SM21)的完整支持。版本管理需注意 7.80 已停止支持,建议升级至 8.10。安装支持原生包和通用 JAR 两种方式,推荐团队标准化版本和连接配置(通过 SAP UI Land

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 678

JAVA:Spring Boot 集成 Forest 优雅的 HTTP 客户端

Forest是一个优雅的Java HTTP客户端框架,通过注解式声明简化HTTP接口调用。它支持多HTTP客户端、自动参数绑定、序列化、重试机制和拦截器等功能。本文演示了如何在Spring Boot中集成Forest,包括配置、接口定义和调用示例,还展示了POST请求、文件上传等常见场景。相比传统HTTP客户端,Forest具有声明简洁、功能完善的特点,特别适合微服务调用和第三方API对接,能显著提升开发效率和代码可维护性。

木头 427

为React Native开发写的JS和React入门知识

来自Leo的原创博客,转载请著名出处我的stackoverflow前言 想来想去,还是需要写一篇文章来介绍下JavaScript和React的基本知识。最初开发ReactNative的时候,完全没接触过React,大学那会简单学了点JS。毕业后一直在某五百强外企上班。做的东西也乱七八糟的,搞过大数据,搞过物联网,不过看我博客的同学应该知道,我对iOS和Android还是比较喜欢的。所以,博客都是

Leo的专栏 2万+

WRFDA如何读取风云四号A 星的GIIRS数据?

🏆本文收录于 《全栈 Bug 调优(实战版)》 专栏。专栏聚焦真实项目中的各类疑难 Bug,从成因剖析 → 排查路径 → 解决方案 → 预防优化全链路拆解,形成一套可复用、可沉淀的实战知识体系。无论你是初入职场的开发者,还是负责复杂项目的资深工程师,都可以在这里构建一套属于自己的「问题诊断与性能调优」方法论,助你稳步进阶、放大技术价值。

**My Coding Family** 1027

ReactJS 101移动开发:用React Native构建跨平台原生应用的终极指南

想要学习如何用React Native快速构建跨平台移动应用吗?React Native作为Facebook推出的开源框架,让开发者可以使用JavaScript和React构建真正的原生移动应用。本文将为你提供完整的React Native入门指南,从环境搭建到项目部署,一步步教你掌握这个强大的移动开发工具。无论你是React新手还是有经验的Web开发者,都能通过本文快速上手React Nativ

gitblog_00952的博客 557

【FPGA教程案例87】加解密1——基于FPGA的AES加解密算法verilog实现

DES已走到了它生命的尽头。56比特密钥实在太小,虽然三重DES可以解决密钥长度的问题,但是DES的设计主要针对硬件实现,而今在许多领域,需要用软件方法来实现它,在这种情况下,它的效率相对较低。1997年4月15日美国国家标准和技术研究所(NIST)发起征集AES(Advanced Encryption Standard)算法的活动,并成立了AES工作组。目的是为了确定一个非保密的、公开披露的、全球免费使用的加密算法,用于保护下一世纪政府的敏感信息。这里,我们对AES的基本原理进行介绍:

FPGA/MATLAB学习教程/源码/项目合作开发 2546

【RT-DETR有效改进】利用MobileNetV3替换Backbone(轻量化网络结构,提点)

本文给大家带来的改进机制是,其主要改进思想集中在结合硬件感知的网络架构搜索(NAS)和NetAdapt算法,以优化移动设备CPU上的性能。它采用了新颖的架构设计,包括反转残差结构和线性瓶颈层,以及新的高效分割解码器Lite Reduced Atrous Spatial Pyramid Pooling(LR-ASPP),以提升在移动分类、检测和分割任务上的表现。实验表明,MobileNets在资源和准确性的权衡方面表现出色,并在多种应用(如对象检测、细粒度分类、面部属性识别和大规模地理定位)中展现了其有效性。

Snu77的博客 2748

CherryUSB USB Host 网卡实战指南:从平台宏配置到 LWIP 网络对接全流程

本文基于 CherryUSB 官方文档《Network Host》整理并结合当前仓库源码展开,讲解 USB Host 网卡(CDC ECM / RNDIS / CDC NCM / ASIX / RTL8152)的宏配置、各 RTOS 平台对接文件的选用,以及网卡枚举、DHCP 获取 IP、pbuf 收发、热插拔移除的完整对接流程,并给出 LWIP 关键配置宏的取值要求,帮助你在嵌入式主机上实现"插

gitblog_00043的博客 953

Outlook Express 6 (OE6) for Win7/Win8/Win10

英文版 Outlook Express6.0, 兼容Win7/Win10/WinXP,解压就可用。

React Native Airbnb Clone:React Native Vector Icons图标集成指南

React Native Airbnb Clone是一个使用React Native和Redux构建的Airbnb克隆应用,本指南将详细介绍如何在该项目中集成和使用React Native Vector Icons图标库,帮助开发者快速实现专业级的图标展示效果。 ## 为什么选择React Native Vector Icons React Native Vector Icons是React

gitblog_00482的博客 1132

WINCC7.3破解文件

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

RU DOS版、EFI版32bit/64bit BIOS常用工具

DOS版、EFI版的RU工具,可用来查看IO、MEM、PCI、SMBIOS等资源。亲测在EFI SHELL下可用。

终极react-native-youtube-iframe教程:10分钟实现React Native视频播放

react-native-youtube-iframe是一个专为React Native构建的Youtube-iframe API包装器,让开发者能够轻松地在移动应用中集成视频播放功能。本教程将带你快速掌握如何使用这个强大的库,在短短10分钟内实现高质量的视频播放体验。 ## 准备工作:安装react-native-youtube-iframe 在开始之前,请确保你的项目满足以下要求: ::

gitblog_00632的博客 1076

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

React Native CSS 快速入门:5分钟学会在 React Native 项目中使用 CSS 语法

React Native CSS 是一款能让开发者在 React Native 项目中使用 CSS 语法编写样式的工具,它能将标准 CSS 转换为 React Native 支持的样式格式,帮助熟悉 CSS 的开发者更轻松地进行 React Native 样式开发。 ## 📦 快速安装步骤 安装 React Native CSS 非常简单,你可以通过 npm 或 yarn 两种方式进行安装:

gitblog_00974的博客 618

ReactJs和React Native的联系和差异

1,React Js的目的 是为了使前端的V层更具组件化,能更好的复用,它能够使用简单的html标签创建更多的自定义组件标签,内部绑定事件,同时可以让你从操作dom中解脱出来,只需要操作数据就会改变相应的dom。2,React Native的目的 是希望我们能够使用前端的技术栈就可以创建出能够在不同平台运行的一个框架。可以创建出在移动端运行的app,但是性能可能比原声app差一点。3...

dengla6847的博客 732

从react-native-markdown-renderer迁移到React Native Markdown Display:完整指南

React Native Markdown Display 是一个100%兼容CommonMark规范的React Native渲染器,由Mient-jan Stelling创建的react-native-markdown-renderer演变而来。本指南将帮助你轻松完成从旧库到这个强大新工具的迁移,享受更完善的Markdown渲染体验。 ## 📌 为什么选择迁移到React Native M

gitblog_00368的博客 731

react-native-cookies完全指南:轻松管理React Native应用中的Cookie

在React Native应用开发中,**Cookie管理**是一个经常被忽视但至关重要的功能。无论是处理用户登录状态、会话管理还是个性化设置,**react-native-cookies** 都能为您提供完整的解决方案。这个强大的库让您在iOS和Android平台上轻松管理Cookie,无需担心平台差异带来的兼容性问题。 ## 🚀 为什么选择react-native-cookies? **

gitblog_00806的博客 1036

如何在React Native中集成react-native-cookies:从安装到使用的快速入门

react-native-cookies是一个专为React Native开发的Cookie管理工具,能帮助开发者轻松处理应用中的Cookie存储、读取和清除等操作,让React Native应用的Cookie管理变得简单高效。 ## 一、快速了解react-native-cookies react-native-cookies是一款专注于React Native平台的Cookie管理库,它提

gitblog_00322的博客 517

react-native 遇到的一些问题

工作的时候跑一个别人的RN项目遇到的一些坑,及汇总的解决方法 react-native 遇到的一些问题 问题1 error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by opening DvaStarter.xcworks

harry_yaya的博客 4776

React Native初认识

React Native 一、什么是RN 1. FaceBook开源,基于React设计的,目前react native在iOS上仅支持7以上,Android4.1以上 1.1 什么是React   官方介绍:A javascript library for building user interfaces(用户界面) React官网地址:http://faceboo

chevins的博客 676
上一篇: 微信分享---测试环境可以分享但是生产上不可以分享
下一篇: React Native 工程初始化过慢解决办法+运行时产生的问题解决方案
丸子哒哒哒
博客等级 码龄12年 31粉丝 50原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值