一、常规
- VSCode 代码格式化
Shift+Option+F #页面格式化代码
Option+Shift+A #块注释
- Xcode代码格式化
^(control ) + i
二、项目开发
- RN项目创建
// 创建指令
npx react-native init AwesomeProject
- iOS 端
// 允许指令后如果时间过长,可以进入到项目ios,执行
pod install
// 报错的话可以在Podfile中最上面增加下面一行,指定仓库路径
source 'https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git'
// M1芯片电脑可能会安装失败
// 错误信息
### Error
//LoadError - dlopen(/Library/Ruby/Gems/2.6.0/gems/ffi-1.15.4/lib/ffi_c.bundle, 0x0009): tried: '/Library/Ruby/Gems/2.6.0/gems/ffi-1.15.4/lib/ffi_c.bundle' (mach-o file, but is an incompatible architecture (have 'x86_64', need 'arm64e')), '/usr/lib/ffi_c.bundle' (no such file) - /Library/Ruby/Gems/2.6.0/gems/ffi-1.15.4/lib/ffi_c.bundle
//[!] Oh no, an error occurred.
执行:arch -x86_64 pod instal
- Android调试
第一步:VSCode中终端执行如下命令,启动服务
yarn start(实际执行了npx react-native start)
第二步:AndroidStudio中终端执行端口监听
adb reverse tcp:8081 tcp:8081
第三步:在AndroidStudio中运行项目
- Android打包
Android项目构建指令,配置了python环境
步骤:在VS中cd到android目录下执行:python uploadPGY.py
- iOS调试(RN>0.73)
#第一步终端执行
npx react-native start --experimental-debugger
#第二步摇晃手机开启debugger模式
这个时候会开启一个新的DevTools调试窗口
- iOS打包
#第一步生成main.js.bundle:执行
npm run bundle-ios
#第二步:
进入原生项目打包
- iconfont使用
1、从iconfont网站项目中选择symbol,生成代码,获取新的链接,
2、在项目最外层路径,iconfont.json替换对应路径,https:保留,替换其他部分
3、保存后,执行指令 npx iconfont-rn 生成新的iconfont
三、错误收集(iOS运行)
- 报错信息: No bundle URL present.
No bundle URL present.
Make sure you're running a packager server or have included a .jsbundle file in your application bundle.
解决方法:百度后有很多原因引起这个情况,这里记录下我本地的解决方案,根据报错提示,猜测是服务出现了问题
1、Xcode打开项目->Products()->找到项目名称的logo->右键(ShowInFinder)->找到应用程序文件
这一步的路径如下: /Users/xxx/Library/Developer/Xcode/DerivedData/project_name(xxx)-aitzrlwjggcuywgootakshkpzjjm/Build/Products/Debug-iphoneos/project_name(xxx)
2、应用程序右键显示包内容->ip.txt
找到该文件后,查看电脑连接网络的ip(系统设置->网络->已连接网络->ip地址(例如:192.168.50.219)),替换成当前网络的ip,再次运行项目
- 报错信息:Connection to http://localhost:8081/debugger-proxy?role=client timed out
Connection to http://localhost:8081/ debugger-proxy?role=client timed out.
Are you running node proxy? If you are running on the device,
check if you have the right IP address in 'RCTWebSocketExecutor.m
原因:本地服务没有起来
解决办法:手动启动服务
在RN项目终端运行npx react-native start
,启动本地服务,然后在Xcode再次运行项目