RN笔记

一、常规

  • VSCode 代码格式化
Shift+Option+F #页面格式化代码
Option+Shift+A #块注释
  • Xcode代码格式化
^(control ) + i

二、项目开发

  • RN项目创建
// 创建指令
npx react-native init AwesomeProject
// 允许指令后如果时间过长,可以进入到项目ios,执行
pod install
// 报错的话可以在Podfile中最上面增加下面一行,指定仓库路径
source 'https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git'
  • Android调试
第一步:VSCode中终端执行如下命令,启动服务
yarn start(实际执行了npx react-native start)
第二步:AndroidStudio中终端执行端口监听
adb reverse tcp:8081 tcp:8081
第三步:在AndroidStudio中运行项目
  • 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再次运行项目

你可能感兴趣的:(RN笔记)