前端程序猿的天花板？react-native开发及调试方案（真实项目，建议收藏）

最新推荐文章于 2024-05-27 09:47:18 发布
最新推荐文章于 2024-05-27 09:47:18 发布
阅读量964 收藏 22
点赞数 19
分类专栏： 程序员 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_83330193/article/details/137141023
版权
  • node依赖

node ./node_modules/react-native/local-cli/cli.js start --reset-cache

在这里插入图片描述

  • 运行项目

npm run dev:rn

在这里插入图片描述

  • 项目启动后，刷新mumu浏览器（双击R，手速要快—— 单身程序猿的福音）

  • 接下来就会看到控制台编译此项目，如下：

在这里插入图片描述

  • 编译成功是这样的（会看到APP运行）

在这里插入图片描述

  • 效果

在这里插入图片描述

  • 摇一摇配置本地IP地址

在这里插入图片描述

  • 接下来会看到如下页面：

最低0.47元/天 解锁文章
2401_83330193
关注
  • 19
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-native-fs 使用小demo
weixin_41064312的博客
02-01 543
前言 最近在学习react-native，需要读取文件，用了react-native-fs这个库，记录一下.其实使用方式文档上已经写得很清楚了，这里就介绍一下我自己是怎么使用，废话不多说，请看代码： // file.js import RNFS from 'react-native-fs'; import moment from 'moment'; import { Platform }...
React Native - 调试技巧及调试菜单说明（模拟器调试、真机调试）
一条宝鱼的专栏
10-25 3968
React Native - 调试技巧及调试菜单说明（模拟器调试、真机调试） 一、模拟器调试 我们在ios模拟器上按快捷键command + D，安卓模拟器上按快捷⌘ + m，即可弹出如下调试菜单。下面分别介绍菜单中的各个调试功能。 1，Reload 刷新页面，其快捷键是（iOS） command + R/（安卓）两按R键。 注意：只有修改JavaScript文件时，刷新功能才起作用。如果新增了文件或者修改了Native代码，就需要使用Xcode重新编译应用了。 2，De...
react-native调试
weixin_40466351的博客
10-27 1346
一些老的教程和文章会提到 React 的 Chrome 插件，这一插件目前并不支持 React Native，而且调试本身并不需要这个插件。注意：使用 Chrome 调试目前无法观测到 React Native 中的网络请求，你可以使用功能更强大的第三方的react-native-debugger或是官方的flipper（注意仅能在 0.62 以上版本可用）来观测。如果页面中有debug，会进入debug模式，会方便我们的调试。我用的真机调试，手机摇晃会出现出现的页面，点击debug。
配置并调试开源前端程序(react)
qq_41861406的博客
05-17 443
(一般安装Node.js会自动安装npm)如果未安装Node.js和npm，可以从。把想要运行的项目下载下来。
react-native 调试工具react-native-debugger使用
qq_45919328的博客
07-26 1685
如果是模拟器 可以按d 真机的话摇晃手机，会出现以下菜单，我已经运行调试工具，所以真是停止的菜单，未运行debug时 是 debug width xxxx。如果在左下角显示报错（让降react-native-debugger版本的）而不是组件元素，要在github下载低版本即可。可以看到控制台，默认是不开启网络调试的，可以右键然后选择netword即可，我这是已经打开了。然后就出现下面页面，鼠标选取新建元素，即可在react-native-debugger看到。首先在模拟器或者真机 打开调试菜单。
React Developer Tools带你掌握9个React组件调试技巧，十分钟学会
03-03 2414
（它可能是一个其它组件）是否正常怎么办呢？的使用情况，以及如何定位某个组件在哪个文件被创建，某个组件又是在哪个文件被使用的习惯，了解到的情况是部分同学没使用。你可能会用到的所有场景以及技巧，我相信在掌握这些小技巧之后对于你未来的开发会有极大的帮助，而关于另一个工具。官方推出的开发者插件，可以毫不夸张的说，它在我们日常组件开发中，对于组件属性以及文件定位，中某个方法是在哪定义的，它可能是从隔了五六层的组件所传递，假设这个方法名像。有同学就说了，我怎么没这个图标按钮，其实只需要一个简单的配置就好了，大家复制。
react-native-rename：仅用一个命令即可重命名react-native应用
01-30
该软件包假定您使用react-native init创建了react-native项目。 注意：此软件包不会尝试正确重命名构建工件，例如ios/build或Cocoa Pod安装目标。 重命名项目后，您应该清理，构建并重新安装第三方依赖项，以使新...
react-native-fs：对react-native的本地文件系统访问
02-05
对于RN <0> = 0.57和/或Gradle> = 3，您必须在版本> = @ 2.13.2上安装react-native-fs！ 对于RN> = 0.61，请在版本> = @ 2.16.0上安装react-native-fs！ 目录 用法 变更日志 在查看更改日志。 使用情况（iOS） ...
react-native-iap：应用内购买的react-native本机模块
02-03
请记住， react-native-iap将提供您需要的基本功能，但不是一站式解决方案，在您的应用中实施应用内购买仍需要大量工作。 同样，实现客户端只是硬币的一面，您必须实现服务器端才能验证收据（正确完成收据可能是最...
react-native-image-to-pdf:react-native插件可将图像转换为PDF
05-26
入门$ npm install react-native-image-to-pdf --save 或者$ yarn add react-native-image-to-pdf 大多是自动安装$ react-native link react-native-image-to-pdf 手动安装的iOS 在XCode的项目导航器中，右键单击“ ...
practical React Native
11-17
Discover how to use React Native in the real world, from scratch. This book shows you what React Native has to offer, where it came from, and where it’s going. You’ll begin with a solid foundation of practical knowledge, and then build on it immediately by constructing three different apps. You’ll learn how to use each feature of React Native by working on two full projects and one full game. These aren’t just simple React Native Hello World examples (although you’ll naturally start there!) but are apps that you can, if you so choose, install on your mobile devices and use for real. Throughout this book, you’ll gain real-world familiarity with React Native as well as supporting components from Expo, NativeBase, React Navigation and the Redux and Lodash libraries. You’ll also build server-side code for a mobile React Native app to talk to using the popular Node.js and Socket.io library, providing you a holistic view of things even beyond React Native. And, you’ll see many helpful tips, tricks and gotchas to watch out for along the way! Practical React Native offers practical exercises that will give you a solid grasp of building apps with React Native, allowing you to springboard into creating more advanced apps on your own.Creating a game with React Native will allow you to see a whole other perspective on what React Native can do. What You’ll Learn Master the basics of React Native Create a logically structured project Review interface elements, such as widgets, controls, and extensions Build layouts Work with Expo, an open source toolchain Who This book Is For The primary audience is mobile developers and anyone looking to build for multiple mobile platforms and trying to do so with a codebase that is largely the same across all. Readers will need a decent foundation, but not necessarily be experts in, HTML, CSS, and JavaScript, but I’ll assume little beyond that.
react-native-qrcode-svg：基于react-native-svg和node-qrcode的React Native QR码生成器
02-05
讨论： ： 产品特点轻松渲染QR码图像（可选）嵌入徽标安卓的iOS安装安装依赖包yarn add react-native-svg react-native-qrcode-svg 要么npm i -S react-native-svg react-native-qrcode-svg 如果您使用的是React ...
React-Native环境搭建：Android真机调试（小米手机miui10系统）
wudith的专栏
01-21 863
主要参考官网的步骤来进行安装，但官网介绍的和最新版本的RN还是有一些差异，总结了一些自己的心得体会。
关于react-native的调试
diaojw090的博客
03-31 353
对于初学RN者来说,调试过程中很可能走点弯路,其实很简单,今天同事突然问到了,就写下来: 0.使用:http://localhost:8081/debugger-ui; 0.5.安装react-devtools 1.在虚拟机或真机上点Remote JS Debugging ,官网上有相关教程:react native中文网 2.根据教程发现,正常debugger是可以的,控制台打印日志也是可以的....
推荐一款神奇的React Native调试利器 —— remotedev-rn-debugger
最新发布
gitblog_00036的博客
05-27 322
推荐一款神奇的React Native调试利器 —— remotedev-rn-debugger 项目地址:https://gitcode.com/jhen0409/remotedev-rn-debugger 当你在开发React Native应用时，是否曾为查找和修复问题而感到困扰？是否想过有一款工具能让你在浏览器中实时监控你的应用状态，帮助你快速定位并解决问题？那么，今天我要向你推荐的这款开源...
用android studio调试react native中的原生代码(windows+android)
qq_32294071的博客
11-03 588
要用Android Studio调试React Native原生代码， 1. 需要先在终端中运行react-native start命令启动React Native服务器。 2. 然后，在Android Studio中打开你的React Native项目（\android\build.gradle），连接你的设备或者启动模拟器。 3. 接下来，点击Android Studio的“Attach Debugger to Android Process”按钮，选择你的设备或模拟器，然后选择你的React Nat
React调试方法
Dragon.G
10-17 1万+
做为一个React开发大白，表示不知道该怎么调试它真TMD痛苦！下面来分享下我通过阅读前人博客总结的调试方法。浏览器扩展工具 —— 『React Developer Tools』Facebook其实早为开发人人员提供了一个很给力的调试工具，并且可以在你的Chrome和FireFox上自由安装。对于前端开发者来说，上手使用这个工具没有任何难度。扩展下载地址： https://github.com/fa
npm 安装React Devtools调试工具
热门推荐
jocchoc的博客
01-09 2万+
前言 这里主要写给和我一样摸索的新手，之前相信大家也看到了网上的一些安装方法，有的给你个git上的下载链接，然后就没有然后了(好像官方也没给个具体操作)；有的让你去google商店下载一个.crx，前提你的网能翻墙。这里主要讲一下如何通过git上的react-devtools文件下载后打包一份扩展程序，来对chrome浏览器进行插件安装。 去git上下载react-devtools文件到本地
react-native link react-native-pdf zsh: command not found: react-native
12-29
要解决"zsh: command not found: react-native"的问题，你需要确保已经正确安装了react-native-cli并且已经将其添加到了系统的环境变量中。 以下是在Windows和Mac上安装和配置react-native-cli的步骤： Windows： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值