React Native的常见bug - 1

原文: https://blog.logrocket.com/common-bugs-in-react-native/
2020.1.31

翻译: 祝坤荣(时序)
email: zhukunrong@yeah.net

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

error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:

…

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: zhukunrong@yeah.net