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再次运行项目