React Native的常见bug - 2

原文: https://blog.logrocket.com/co...
2020.1.31
翻译: 祝坤荣(时序)
email: [e-mail]

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。

LogRocket就像web应用的DVR，记录你React应用的所有事情。取代了猜测问什么问题会发生，你可以在问题发生时聚合和上报你应用的状态。LogRocket也会监控你应用的性能，上报诸如CPU负载，客户端内存使用等指标信息。
LogRocket Reedux中间件包对你用户的会话加了额外的可视化层。LogRocket记录了你Redux的所有动作和状态。

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

---

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