服务器之家

服务器之家 > 正文

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

时间:2022-03-08 16:49     来源/作者:愚公搬代码

构建项目

在相应的路径下执行命令行:react-native init 项目名 (名称不可使用连接符等特殊字符,命名可以参考APP应用名称 比如 FaceBook)

?
1
2
3
4
react-native --v //查看版本
react-native init demo --version 0.48.0//安装指定的版本
react-native init demo --verbose --version 0.48.0 //verbose是初始化的时候显示安装详情的,安装什么模块以及进度
npm view react-native versions //可以查看react-native所有的版本信息

跳转到对应路径下执行相应的移动端项目:

?
1
2
cd 项目名
react-native run-ios or react-native run-android

如果正常,运行效果如下:

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

RN调试技巧

Developer Menu

Developer Menu是React Native给开发者定制的一个开发者菜单,来帮助开发者调试React Native应用。

在模拟器上开启Developer Menu Android模拟器:

可以通过Command⌘ + M快捷键来快速打开Developer Menu。也可以通过模拟器上的菜单键来打开。

iOS模拟器:

可以通过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会被直接显示在屏幕上,以红色的背景显示,并会打印出错误信息。 你也可以通过console.error()来手动触发Errors。

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

Warnings

React Native程序运行时出现的Warnings也会被直接显示在屏幕上,以黄色的背景显示,并会打印出警告信息。 你也可以通过console.warn()来手动触发Warnings。 你也可以通过console.disableYellowBox = true来手动禁用Warnings的显示,或者通过console.ignoredYellowBox = ['Warning: ...'];来忽略相应的Warning

Chrome Developer Tools

第一步:启动远程调试

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

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

第二步:打开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
2
3
4
5
6
7
yarn:清空缓存
 
yarn cache clean
 
npm:清空缓存
 
npm cache clean -f

到此这篇关于React Native 脚手架的基本使用的文章就介绍到这了,更多相关React Native 脚手架内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家!

原文链接:https://codeboy.blog.csdn.net/article/details/107921735

标签:

相关文章

热门资讯

2022年最旺的微信头像大全 微信头像2022年最新版图片
2022年最旺的微信头像大全 微信头像2022年最新版图片 2022-01-10
蜘蛛侠3英雄无归3正片免费播放 蜘蛛侠3在线观看免费高清完整
蜘蛛侠3英雄无归3正片免费播放 蜘蛛侠3在线观看免费高清完整 2021-08-24
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
返回顶部