1. 程式人生 > >React Native常見問題彙總(持續更新ing)

React Native常見問題彙總(持續更新ing)

1.建立新專案,react-native init AwesomeProject命令長時間無響應,或報錯shasum check failed

react-native命令列從npm官方源拖程式碼時會遇上麻煩。請將npm倉庫源替換為國內映象:

npm config set registry https://registry.npm.taobao.org --global

npm config set disturl https://npm.taobao.org/dist --global

另,執行init時切記不要在前面加上sudo

 

 

2.報錯:Invariant Violation:Application XXXX has not been registered

確保index.android.js中的AppRegistry.registerComponent('專案名',() => ...);

與MainActivity.java中的

mReactRootView.startReactApplication(mReactInstanceManager,"專案名", null);

都保持一致。

 

 

3.IDE選擇問題

WebStorm,最新版對JSX、flowtype等語法支援均非常優秀,對於Android Studio熟悉的開發人員建議用WebStorm。

Sublime,外掛系統非常強大,因此如果願意折騰的話,是個非常不錯的選擇。

另外雖然主要的業務邏輯是使用js開發,但仍然要依賴於原生的編譯/除錯環境,所以你還需要同時執行Xcode(iOS)或Android Studio(android)等。

 

 

4. could not get batchedbridge, makesure your bundle is packaged correctly

可能是你將之前安裝並配置好的apk應用從手機解除安裝掉,然後重新安裝執行,這時候的dev settings 被重置了。

解決方案:執行React-native run-Android或引入到Android Studio中執行,然後搖動手機(Android端),重新配置好IP和埠號,reload

 

 

5.報錯:Invariant Violation: Element type is invalid

在ES6語法中,require和export default不能直接配對使用。

所以,你要麼把

varHello = require('./components/Hello');

改為import Hello from './components'

要麼把export defaultReact.createClass({

改為module.exports =React.createClass({

二者選其一,配對使用。

 

 

6.對於除錯時搖晃手機,頁面一直顯示Please wait… 瀏覽器除錯外掛也沒反應情況

檢視終端程式碼報錯資訊,這時的終端進度不顯示100%,如下圖所示,不要一直等待消耗時間,關掉終端,重啟app重新start專案




7.對於替換專案中的圖片,終端每次都顯示如下圖所示Log,好多地兒報亂碼

可能是目前React Native還不是特別成熟,還是因為圖片名字不換,但是圖片本身更換了,會被識別錯誤。


關閉終端,殺掉app,重新來,目前網上沒有查到有關說明,不知道有沒有更加快捷的辦法



8.利用Navigator整合頁面跳轉邏輯後不生效或者報錯

可能是目前React Native還不是特別成熟,先嚐試reload如果不生效關閉終端,重新start專案。



9.適配相關方法

letDimensions = require('Dimensions');

letPixelRatio = require('PixelRatio');

lettotalWidth = Dimensions.get('window').width;

lettotalHeight = Dimensions.get('window').height;

letpixRatio = PixelRatio.get();



10.修改8081預設埠號的兩種方式

(1)啟動專案時react-native start --port 8083

(2)手動修改專案下的node_modules\react-native\local-cli\server\server.js下的方法server.js檔案,如下圖所示。



11.invariant violation:expected acomponent class,got[object object]

    建立自定義元件首字母要大寫,否則會報錯.

 

12.Module 0 is not a registeredcallable module.

    將gradle升級成最新版本cd進入android目錄執行:sudo./gradlew clean) 或者通過android studio工具升級.

 

13.android.view.WindowManager$BadTokenException:Unable to add window -- token null is not valid; is your activity running?

    該錯誤屬於安卓Native的錯誤,如果引用的Activity不存在或者已經銷燬,再次引用就會報該錯誤,如果是React Native 呼叫原生控制元件的話,建立控制元件需要引用:getCurrentActivity()

 

14.android.app.Application cannot becast to com.facebook.React.ReactApplication

    需要將建立的MainApplication在AndroidManifest.xml配置好.

 

15.Element type is invalid: expecteda string (for built-in components) or a class/function but got: object

    發生原生一般是你引用了無效的元件,如果元件確實正確,看下引用的元件是否正常匯出:(export defalut)

 

16.react native  undefined is not an object (evaluatingthis....

    發生該錯誤的一般是忘記bind(this),只要回撥函式中需要用到this的,一般都需要bind.

 

17.react native - expected acomponent class, got [object Object]

   該錯誤可能是你引用了小寫的元件,元件首字母一定要大寫,比如<login/>應該寫成<Login/>


18.Exception in native call from JS

Java.lang.RuntimeException:ReferenceError: Can’t find variable: __fbBatchedBridge

    請檢查你的手機或者模擬器是否和你的React Native服務端在同一個區域網內。

 

19.Exception in native call from JS

com.facebook.React.bridge.NativeArgumentsParseException:InteractionManager.pushToArticleDetail got 2 arguments, expected 1

這種類似 com.facebook.react.bridge.NativeArgumentsParseException: *.* got *arguments, expected *往往是在Android和JS通訊是產生的錯誤,檢查一下你的介面中的引數,例子提示的是InteractionManager.pushToArticleDetail的引數,JS中有兩個,而Android中引數只有一個,所以檢查引數,比對上即可。

 

20.com.facebook.react.bridge.NativeArgumentsParseException:TypeError: expected dynamic type string', but had typeobject’ (constructingarguments for InteractionManager.pushToArticleDetail at argument index 0)

類似這種提示,往往是介面中引數型別的不匹配,需要注意的是RN介面中引數和Java引數的對應:

Boolean-> Bool
Integer-> Number
Double-> Number
Float-> Number
String-> String
Callback-> function
ReadableMap-> Object
ReadableArray-> Array





未完待續……