React Native的常见bug - 2

祝坤荣
原文: https://blog.logrocket.com/co...
2020.1.31
翻译: 祝坤荣(时序)
email: zhukunrong@yeah.net

URI versus URL in the image element(图像标签的URI和URL)

当在图像标签中显示远程图片时,你需要将原对象命名为URI,就像这样:

<Image source={{ uri: 'https://facebook.github.io/react-native/img/homepage/phones.png' }} />

如果你错误的用了"URL",而不是"URI",在iOS设备上可以正常显示,但在安卓设备上就会挂掉。知道这个坑可以节省你大量的debug时间。

String outside text

Invariant Violation: Text strings must be rendered within <Text> component.
This error is located at:
in a (at App.js:29)  
in RCTScrollContentView (at ScrollView.js:1038)  
in RCTScrollView (at ScrollView.js:1178)  
in ScrollView (at App.js:25)  
in RCTSafeAreaView (at SafeAreaView.js:55)  
in SafeAreaView (at App.js:24)  
in App (at renderApplication.js:40)  
in RCTView (at AppContainer.js:101)  
in RCTView (at AppContainer.js:119)  
in AppContainer (at renderApplication.js:39)

这个错误很直接,你可以看到它是在app.js文件的29行,但仍然可以提一提可能的原因

如果你遇到这个错误,你可能忘了将字符串用Text组件包住或引入了个渲染你不可识别组件的打字错误。后者是更常见的原因 - 一个多余的括号,或者多余的逗号。这些错误很难被定位,就算我们知道哪里去找。

在未来版本,最好能支持让错误消息里有更多有用的信息,比如哪些特定的字符串引起了这个问题。

Dependencies error 依赖错误

Error: undefined Unable to resolve module \`@babel/runtime/helpers/interopRequireDefault\` from \`App.js\`: @babel/runtime/helpers/interopRequireDefault could not be found within the project.

If you are sure the module exists, try these steps:  
1\. Clear watchman watches: watchman watch-del-all  
2\. Delete node\_modules: rm -rf node\_modules and run yarn install  
3\. Reset Metro’s cache: yarn start ––reset-cache  
4\. Remove the cache: rm -rf /tmp/metro-\*

如果跳出来一个这样莫名其妙的错误,那么最可疑的地方应该是NPM或Yarn里的node_modules目录。

首先,你可以尝试重新安装整个依赖目录。如果你仓库里的一个主依赖项的改动就可能会引起这个问题。在主工程目录里能看到node_modules目录的地方运行命令来移除和重新安装它们。

rm -rf node_modules && yarn

如果这不管用,你也可以尝试用以下方式来找到错误信息。这有一个已经改好的命令可以让你拷到终端里:

watchman watch-del-all && rm -rf /tmp/haste-map-react-native-packager-* && rm -rf /tmp/metro-bundler-cache-* && rm -rf node_modules/ && yarn cache clean && yarn

这样可以清理watchman的watch,重置缓存,清除haste缓存,重装整个node_modules目录,并清理yarn缓存。

对于Android和iOS的额外定位

如果你还有错误,你可以尝试清理你的工程。下一步将取决于你开发用的平台。

Android

尝试用以下命令来清理主工程目录里的Gradle缓存。

cd android && ./gradlew clean

iOS

如果你是从XCode打开的工程则尝试清理你的工程。从上面的菜单条点击"Product"和"Clean"。

你可能需要在ios目录运行pod deintegrate来彻底移除pod,并重新运行pod install。

最后,移除衍生的derived data也会很有帮助:

rm -rf ~/Library/Developer/Xcode/DerivedData/*

总结

现在你应该可能能定位到七个在开发React Native app时最常见的bug了。其中有一些在你阅读这篇文章时已经被修复了,并且错误信息在新版本发布时也会更加有描述性。但现在,我们需要干现在手头的工作。知道这些错误后面的上下文可以节省你很大一部分debug时间。最后,由于这些错误很难定位,当你知道你在找什么时就会比较容易修复。

生产环境React app的全可视化

Debug React应用很困难,特别当用户体验问题很难复现时。如果你对监控和追踪Redux状态,自动捕捉JavaScript错误,追踪慢慢网络请求和组件加载时间有兴趣,可以试试 LogRocket。
image.png
LogRocket就像web应用的DVR,记录你React应用的所有事情。取代了猜测问什么问题会发生,你可以在问题发生时聚合和上报你应用的状态。LogRocket也会监控你应用的性能,上报诸如CPU负载,客户端内存使用等指标信息。
LogRocket Reedux中间件包对你用户的会话加了额外的可视化层。LogRocket记录了你Redux的所有动作和状态。

让你现代化的debug你的React应用 - 从这里开始。


文章来自微信平台「麦芽面包」
微信公众号「darkjune_think」
转载请注明。

阅读 380

麦芽面包
杭州程序员乱弹,聊技术,看世界。兴趣方向互联网分布式系统稳定性建设,容量规划,压测,监控,容灾多...

科幻影迷,书虫,硬核玩家,译者

997 声望
1.5k 粉丝
0 条评论
你知道吗?

科幻影迷,书虫,硬核玩家,译者

997 声望
1.5k 粉丝
宣传栏