React Native的常见bug - 1
source link: http://mp.weixin.qq.com/s?__biz=MzAwMTEwNzEyOQ%3D%3D&%3Bmid=2650009616&%3Bidx=1&%3Bsn=f5907e0c28c70f5cd4120d4432bcea1a
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
原文: https://blog.logrocket.com/common-bugs-in-react-native/
翻译: 祝坤荣(时序)
React Native是可以用来同时实现Android和iOS平台应用的不错的框架。由于它被React社区和Facebook支持，它离version 1.0还很早。
一些你遇到的error可能很容易被误导或极难发现。最近，React Native团队在向开发者提问来帮助他们确定哪些恼人的error可能会让人失望。当他们定位了最差的error，
让我们看看这些issue并且讨论下当他们跳出来时如何定位。
Import error
Invariant Violation: Element type is invalid: >expected >a string (for built-in components) or a >class/function (for composite components) but got: >undefined. You likely forgot to export your component >from the file it’s defined in, or you might have mixed >up default and named imports.
Check the render method of ‘App’.
This error is located at:
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)
React Native团队从上个版本开始让这个error更清晰。通常， 混在一起的default和named imports是问题的根源。
这还是很棘手，因为可以看到，error是被import到app里的component组件引起的，但我们不能找到哪一个imprted进来的有问题。这个提示没有指出这个组件或甚至是error是在哪一行出现的。
要在创建和export导出组件时避免这个error，记住不要将default和named import混在一起。这有什么分别？
比如你有个component：
export const componentName
你要像这样导入：
import {componentName} from './file'
但如果你用了default export呢？
export default componentName
这种情况下，你不能用括号来导入它，你可以这么做：
import componentName from './file' //ok
import someOtherName from './file' //ok
import { componentName } from './file' //wrong!
Animated.View error
Invariant Violation: [453,”RCTView”,1,
{“width”:250,”height”:50,”backgroundColor”:4289781990,”opacity”:1}] is not usable as a native method argument
This error is located at:
in RCTView (at file.js:27)
in FadeInView (at file.js:42)
in RCTView (at file.js:41)
in _default (at App.js:29)
in RCTScrollContentView (at ScrollView.js:1038)
in RCTScrollView (at ScrollView.js:1178)
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)
开发者经常在使用React Native的动画元素时遇到这个错误。它是你会遇到的最棘手的错误， 取决于具体场景提示可能看起来有一点不同。
尽管消息让人困惑，这个错误是被一个简单的问题引起的：当创建一个动画组件时，你需要创建一个element元素(如View)，像这样：
<Animated.View>
如果你用了一个常规的view，就会抛出上面的error。
要定位这个错误很难，理解他可以帮你剩下很多时间。这是在React Native仓库里与其他需要修复的恼人error一起并列的问题, 团队期望在下一个release修复它。
Autolinking error
… This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via “react-native unlink <dependency>” and it will be included in your app automatically. If a library isn’t compatible with autolinking, disregard this message and notify the library maintainers.
在React Native version 0.60，我们不再需要用 react-native link命令了， 这让设置一个app的过程更简单了。尽管它可能触发一些新的error，特别是当你用了一些不支持autolinking特性的老库。
如果你在0.60+的项目里用了react-native link，运行react-native unlink然后再尝试运行你的应用。如果你没有用命令但看到了这个error， 那有可能是你的依赖库里面有不支持autolinking的。如果是那个问题，你可以尝试使用 patch-package来自己修复。
请一定将你的解决方案提交一个pull reqeust给类库仓库 - 你可以帮其他人节省很多时间。
Null in the image element
JSON value ‘<null>’ of type NSNull cannot be converted to NSString
当一个图片元素有一个空的URI时这个错误就会出现。
<Image source={{ uri: null }} />
这在你要打开的URI是从后端获取的而你不知道什么时候它是一个link或者是null的时候会极端困难。
未完待续
本文来自祝坤荣(时序)的微信公众号「麦芽面包，id「darkjune_think」
转载请注明。
交流Email: [email protected]
Recommend
-
116
前言 本文是摘录整理了移动端常见的一些bug以及解决方案，第一篇，后面还会有持续的文章更新整理。 点击样式闪动 Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。 A:根本原因是-webkit-tap-h
-
51
前言 上一篇之后我从各个小伙伴那里收集到了第二波移动端常见的bug以及其解决方案，部分解决方案可能不准确或者存在问题，希望有正确解决方案的给与评论。 备注：文中的bug收集于网络，解决方案可能并不准确，欢迎大家提供更加完整的方案。 建议阅读时间：10-15mi
-
41
点击样式闪动 Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。 A:根本原因是-webkit-tap-highlight-color，这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。建议写...
-
40
摘要：学习 React。 原文： React.js 常见问题 作者： 前端小智
-
35
关于前端开发，我最开心的事情就是总有新的东西可以学习。但我们可能一辈子都在掌握各种编程语言、库和框架，但仍然一无所知。 因为我们都在学习，这也意味着我们都容易犯错误。没关系，我们的目的是变得更好。如果你犯了一个错...
-
28
原文: https://blog.logrocket.com/co... 2020.1.31 翻译: 祝坤荣(时序) email: [email protected] URI versus URL in the image element（图像标签的URI和URL） 当在图像标签中显示远...
-
14
问题是这样的，线上的Bugly爆出这样一个错误，而且延续了好多个版本，一直没有解决，崩溃次数已经上千次，因为刚看过RN源码所以斗胆尝试解决一下。 Attached DialogModule to host with pending alert but no FragmentManager (not attache...
-
10
React16常用api解析以及原理剖析Vue 与 React 两个框架的粗略区别对比 react 16 版本常见 api...
-
7
You’re using iframes to embed content on a page in React. What could possibly go wrong, you wonder. Apparently, a whole lot! In this post, we’ll fix a bug where iframes in React interfere with your browser’s back-navi...
-
3
一杯茶，一包烟，一个Bug改一天程序错误，即英文的Bug，也称为缺陷、臭虫，是指在软件运行中因为程序本身有错误而造成的功能不正常、死机、数据丢失、非正常中断等现象。 早期的计算机由于体积非常庞大，有些小虫子可能会钻入机器内部，造成计算...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK