20220701 开始写 react-native 写应用 的一点小总结

218 阅读2分钟

公司是偏向传统的软硬件解决方案提供商。 本来面试前端觉得至少要做个两三年切图仔,没想到从 nodejs 后端 + vue 前端一下子跳到了 rn 开发。

表示 react 和 rn 生态以及 android 完全不熟悉呀。

幸得领导悉心教导,以及同事的帮助。 我才 悄悄入门了 rn 应用开发的领域(菜鸟一枚。 这里简单记录一下 关于应用与调试的一些技巧和工作常识。。

开发rn 应用调试的便利自然不比 前端 F12 来得便利,不过用上这些操作常识与软件整体来说也还行

adb 常识

# 连接设备 端口默认5555
adb connect 域名:端口 
# 断开连接
adb disconnect 域名:端口
# 检查已连接设备
adb devices 
# 安装应用 
adb install xxx.apk
# 卸载应用
adb uninstall com.应用名

调试与报错控制台

adb 打印日志

adb logcat -v time *:E

使用 android 的控制台 logcats 查看日志

android studio 或者 idea 都可以。 当 安卓设备 连接上 电脑后,即可在 logcats 上查看到 js 和 java 的所有打印日志

使用 react-native-debugger

react-native-debugger 是一个较为完备的react-native (js)调试工具,可以查看控制台,查看视图节点及其state信息,还可以查看 store 状态管理 (比如 redux 的所有属性与历史操作),可以说是最舒服的一种js 调试方式了

如果想要 js 打断点,使用 vscode 运行也是很简单的

vscode 只需要安装 microsoft 的rn 插件即可 即 react-native-tools 下载完成后就可以在运行和调试中运行 rn 了.

安装

# extra bucket仓库 中
scoop install react-native-debugger

电脑远程控制设备

使用手点设备十分麻烦,所以还是远程桌面会快点

vendor

需要在设备上安装软件 效果一般 不过还挺稳定的

scrspy

这个软件更为小巧,虽然偶尔会断掉(android 重启等),不过还算很轻便了 断掉重新运行一下也可以接受

安装

scoop install scrspy 

使用

只需adb 连接之后 运行 scrcpy 软件即可

总结

初初入门 还很小白, 大抵便是如此,溜了溜了