React Native开发中的一些问题
安装:
https://www.oracle.com/java/technologies/javase/javase8-archive-downloads.html
https://developer.android.google.cn/studio/#downloads
brew update && brew cask install react-native-debugger
常见问题:
-
内容不显示时:(1)关闭远程调试然后重新加载页面 (2)检查接口是否正确返回
-
代码不生效时:清除缓存
npm start -- --reset-cache
-
无法加载图片时:关闭代理
-
图片出现条纹,非正常拉伸:可能是直接给图片加圆角导致的,可以把圆角加给图片的外层容器
-
Android 模拟器无法连接到开发服务器:可能是模拟器未打开 wifi,尝试更换模拟器
-
react-native-video 组件在 android 上会出现一些问题,比如:
播放到某个时间节点(我这里是1分19秒左右)时会卡住三四十秒,然后继续播放;
通过修改视频宽高第一次进入全屏时会重新加载、从头播放,表现为:黑屏几秒,然后等待加载完成
解决方案:使用 exoplayer,android 端修改代码:
project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer')
- 使用 react-navigation 5.x,需要在配置路由的文件【顶部】添加
import 'react-native-gesture-handler';
遇到问题:
(1)android 闪退
android/app/build.gradle 的 dependencies 添加
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
(2)图片和导航区域重叠的部分在 android 真机上无法响应点击事件
设置 zIndex
- 安装新的 package 需要 link:
- React Native 0.59 及以下:react-native link
- React Native 0.60 及以上:cd ios; pod install; cd ..
若是 react-native-** 之类的还需要客户端更新代码
- 若项目使用热更新,那么 RN 发版时不仅需要内置 bundle,也要发布到热更新平台,如果没有发布,则会偶现 bug:
假设热更新平台存在版本:v1(稳定)->v2,
热更新机制:加载 rn 页面时检查热更新平台有没有新版本,如果有(v2)且可用,则下载下来,此时 app 里面内置 bundle 和 v2 同时存在;如果有(v2)但不可用,则页面报错然后回滚到内置 bundle(app 里面只有内置 bundle)或 v1,每隔半小时尝试加载一次 v2,五次均失败后不再尝试(可配置)。
- 无法解释、莫名其妙的报错,终极解决办法:
- React Native 0.59 及以下
rm -rf android/、ios/、node_modules/
npm i
react-native eject
react-native link
npm start -- --reset-cache
- React Native 0.60 及以上
watchman watch-del-all
rm -rf node_modules && npm install
npm start -- --reset-cache