乐趣区

React-Native的常见bug-2

jiezi

原文: 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。

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

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

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

退出移动版