React Native的常見bug

原文: https://blog.logrocket.com/co...
2020.1.31
翻譯: 祝坤榮(時序)
email: zhukunrong@yeah.net

React Native的常見bug - 1

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