• 售前

  • 售后

热门帖子
入门百科

React Native 脚手架的基本利用详解

[复制链接]
涵宸霖 显示全部楼层 发表于 2021-10-26 14:10:51 |阅读模式 打印 上一主题 下一主题
构建项目

在相应的路径下实行命令行:
  1. react-native init 项目名
复制代码
(名称不可利用毗连符等特殊字符,命名可以参考APP应用名称 好比 FaceBook)
  1. react-native --v //查看版本
  2. react-native init demo --version 0.48.0//安装指定的版本
  3. react-native init demo --verbose --version 0.48.0 //verbose是初始化的时候显示安装详情的,安装什么模块以及进度
  4. npm view react-native versions //可以查看react-native所有的版本信息
复制代码
跳转到对应路径下实行相应的移动端项目:
  1. cd 项目名
  2. react-native run-ios or react-native run-android
复制代码
如果正常,运行结果如下:

RN调试本领

Developer Menu
Developer Menu是React Native给开辟者定制的一个开辟者菜单,来资助开辟者调试React Native应用。
在模仿器上开启Developer Menu Android模仿器:
可以通过
  1. Command⌘ + M
复制代码
快捷键来快速打开Developer Menu。也可以通过模仿器上的菜单键来打开。
iOS模仿器:
可以通过
  1. Command⌘ + D
复制代码
快捷键来快速打开Developer Menu。
Reload
革新页面,其快捷键是 command + R
留意:只有修改 JavaScript 文件时,革新功能才起作用。如果新增了文件大概修改了 Native 代码,就必要利用 Xcode 重新编译应用了。
Debug JS Remotely
该功能答应开辟职员在 Chrome 中调试应用,其调试方式和调试 Web 应用一样。
change bundle location
改变打包后的地点
toggle inspector
在模仿器中查看组件样式。不怎么好用。
disable fast refresh
克制快速革新
Show Perf Monitor
该功能启用后会显示一个监控窗口,显示出实时的内存占用、UIJavaScriptFPS 等信息。资助我们调试性能问题。
Errors and Warnings
在development模式下,js部门的Errors 和 Warnings会直接打印在手机或模仿器屏幕上,以红屏和黄屏展示。。
Errors
React Native步调运行时出现的Errors会被直接显示在屏幕上,以赤色的背景显示,并会打印出错误信息。 你也可以通过
  1. console.error()
复制代码
来手动触发Errors。

Warnings
React Native步调运行时出现的Warnings也会被直接显示在屏幕上,以黄色的背景显示,并会打印出告诫信息。 你也可以通过
  1. console.warn()
复制代码
来手动触发Warnings。 你也可以通过
  1. console.disableYellowBox = true
复制代码
来手动禁用Warnings的显示,大概通过
  1. console.ignoredYellowBox = ['Warning: ...'];
复制代码
来忽略相应的Warning
Chrome Developer Tools

第一步:启动远程调试

在Developer Menu下单击”Debug JS Remotely” 启动JS远程调试功能。此时Chrome会被打开,同时会创建一个“http://localhost:8081/debugger-ui.” Tab页。

第二步:打开Chrome开辟者工具

在该“http://localhost:8081/debugger-ui.”Tab页下打开开辟者工具。打开Chrome菜单->选择更多工具->选择开辟者工具。你也可以通过快捷键(Command⌘ + Option⌥ + I on Mac, Ctrl + Shift + I on Windows)打开开辟者工具。
断点调试 当发生一些"莫名奥妙"的问题错误,常用解决方案
这里的莫名其妙是指,在上一刻代码还可以正常运行,在没有修改的情况下爆红:
1.革新 ! 革新! 革新!
2.重新利用react-native run-xxx命令启动App
3.删掉App步调,关掉本地服务器,扫除本地缓存
  1. yarn:清空缓存
  2. yarn cache clean
  3. npm:清空缓存
  4. npm cache clean -f
复制代码
到此这篇关于React Native 脚手架的基本利用的文章就先容到这了,更多干系React Native 脚手架内容请搜索草根技术分享以前的文章或继承浏览下面的干系文章渴望大家以后多多支持草根技术分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作