【轉】ReactNative開發之疑難雜症

1.Unrecognized font family ‘Material Icons’

解決方法:

1).Then run

react-native start --reset-cache

2).Finally run

react-native run-ios

to restart the simulator

2.出現如下黃色提示

Remote debugger is in a background tab which may cause apps to perform slowly. Fix this by foregrounding the tab (or opening it in a separate window).

1	Remote debugger is in a background tab which may cause apps to perform slowly . Fix this by foregrounding the tab ( or opening it in a separate window ) .

把chrome的Tab頁保持最前，視窗不要最小化

參考連結

React Native開發錯誤警告處理總結

3.ios真機運作xcode報錯

Signing for “YiChunTests” requires a development team. Select a development team in the project editor.

1	Signing for “YiChunTests” requires a development team . Select a development team in the project editor .

别忘記修改test下的Team

【轉】ReactNative開發之疑難雜症

4.android真機運作

白屏，檢查手機設定以及安全軟體設定，打開懸浮窗選項

參考連結

react-native在Anroid真機運作時可能會遇到白屏的情況解決辦法

Warning: PropTypes has been moved to a separate package. Accessing React.PropTypes is no longer supported and will be removed completely in React 16. Use the prop-types package on npm instead.

1	Warning : PropTypes has been moved to a separate package . Accessing React . PropTypes is no longer supported and will be removed completely in React 16. Use the prop - types package on npm instead .

import React, {PropTypes } from ‘react’;

1	import React , { PropTypes } from ‘react’ ;

修改為

import PropTypes from ‘prop-types’;

1	import PropTypes from ‘prop-types’ ;

參考連結

react-native在chrome調試工具中出現警告，并且不能使用react dev-tools

ExceptionsManager.js:73 Warning: React.createClass is no longer supported. Use a plain JavaScript class instead. If you’re not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

1	ExceptionsManager . js : 73 Warning : React . createClass is no longer supported . Use a plain JavaScript class instead . If you’ re not yet ready to migrate , create - react - class is available on npm as a drop - in replacement .

// 15.4 以前 var React = require(‘react’); var Component = React.createClass({ mixins: [MixinA], render() { return <Child />; } }); // 15.5 以後 var React = require(‘react’); var createReactClass = require(‘create-react-class’); var Component = createReactClass({ mixins: [MixinA], render() { return <Child />; } });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// 15.4 以前 var React = require ( ‘react’ ) ; var Component = React . createClass ( { mixins : [ MixinA ] , render ( ) { return < Child / > ; } } ) ; // 15.5 以後 var React = require ( ‘react’ ) ; var createReactClass = require ( ‘create-react-class’ ) ; var Component = createReactClass ( { mixins : [ MixinA ] , render ( ) { return < Child / > ; } } ) ;

參考連結

React v15.5.0更新說明 & v16.0.0更新預告

7.使用react-native-image-crop-picker報錯

dyld: Library not loaded: .framework/QBImagePicker Referenced from: /var/containers/Bundle/Application/A9C4A1F8-6299-493E-B56C-E1A629561451/CropPicker.app/CropPicker Reason: image not found

1 2 3

dyld : Library not loaded : . framework / QBImagePicker Referenced from : / var / containers / Bundle / Application / A9C4A1F8 - 6299 - 493E - B56C - E1A629561451 / CropPicker . app / CropPicker Reason : image not found

在Target下點選General,選擇Embedded Binaries單擊+并添加RSKImageCropper.framework和QBImagePicker.framework

參考連結

https://github.com/ivpusic/react-native-image-crop-picker/issues/302

8.使用react-navigation的TabNavigator，某個子界面設定tabBarVisible: false，切回時會報錯

Cannot read property ‘setNativeProps’ of undefined

1	Cannot read property ‘setNativeProps’ of undefined

react-navigation/mode_models/react-native-tab-view中src/TabViewPagerPan.js的componentDidUpdate

将

this._transitionTo(this.props.navigationState.index)

1	this . _transitionTo ( this . props . navigationState . index )

改為

setTimeout(this._transitionTo, 0, this.props.navigationState.index);

1	setTimeout ( this . _transitionTo , 0 , this . props . navigationState . index ) ;

github

【轉】ReactNative開發之疑難雜症

9.androis studio debug時出現提示，如果下載下傳不成功需要開vpn下載下傳

c++ debugger package is missing or incompatible

1	c ++ debugger package is missing or incompatible

相關連結

c++ debugger package is missing or incompatible
Android Studio 2.2.2 LLDB 2.2 update issue

10.react-native run-android，在build.gradle檔案中出現

注: 有關詳細資訊, 請使用 -Xlint:deprecation 重新編譯。

1	注 : 有關詳細資訊 , 請使用 - Xlint : deprecation 重新編譯。

allprojects { gradle.projectsEvaluated { tasks.withType(JavaCompile) { options.compilerArgs << “-Xlint:unchecked” << “-Xlint:deprecation” } } }

1 2 3 4 5 6 7

allprojects { gradle . projectsEvaluated { tasks . withType ( JavaCompile ) { options . compilerArgs << “-Xlint:unchecked” << “-Xlint:deprecation” } } }

參考連結

android出現注: 某些輸入檔案使用或覆寫了已過時的 API。注: 有關詳細資訊, 請使用 -Xlint:deprecation 重新編譯。注: 某些輸入檔案使用了未經檢查或不安全的操作。注

11.Error:(64, 31) 警告: [unchecked] 未經檢查的轉換需要: Map<String,Object> 找到: Map

添加

@SuppressWarnings(“unchecked”)

1	@ SuppressWarnings ( “unchecked” )

【轉】ReactNative開發之疑難雜症

參考連結

Java魔法堂：注解用法詳解——@SuppressWarnings
警告: [unchecked] 未經檢查的轉換

12.

ld: library not found for -lRNDeviceInfo-tvOS clang: error: linker command failed with exit code 1 (use -v to see invocation)

1 2	ld : library not found for - lRNDeviceInfo - tvOS clang : error : linker command failed with exit code 1 ( use - v to see invocation )

移除-lRNDeviceInfo-tvOS

參考連結:

Linking fails on react-native 0.49.3

13.

Unhandled JS Exception: Missing Realm constructor. Did you run “react-native link realm”? Please see https://realm.io/docs/react-native/latest/#missing-realm-constructor for troubleshooting

1	Unhandled JS Exception : Missing Realm constructor . Did you run “react-native link realm” ? Please see https : //realm.io/docs/react-native/latest/#missing-realm-constructor for troubleshooting

【轉】ReactNative開發之疑難雜症

在realm/lib/index.js中添加

if (typeof atob !== ‘undefined’) { return ‘chromedebugger’; }

1 2 3

if ( typeof atob !== ‘undefined’ ) { return ‘chromedebugger’ ; }

14.出現如下錯誤，如果使用shadowscks,關閉或選擇自動代理。

No bundle URL present. Make sure you’re running a packager server or have included a .jsbundle file in your application bundle.

1 2 3

No bundle URL present . Make sure you’ re running a packager server or have included a . jsbundle file in your application bundle .

參考連結

realm-js

15.出現以下是因為沒有引入libART.a圖形庫，這個需要手動導入

ExceptionsManager.js:73 No component found for view with name “ARTShape” ExceptionsManager.js:73 No component found for view with name “ARTSurfaceView”

1 2	ExceptionsManager . js : 73 No component found for view with name “ARTShape” ExceptionsManager . js : 73 No component found for view with name “ARTSurfaceView”

1).使用xcode中打開react-native中的ios項目，選中‘Libraries’目錄 ——> 右鍵選擇‘Add Files to 項目名稱’ ——> ‘node_modules/react-native/Libraries/ART/ART.xcodeproj’ 添加；

2).選中項目根目錄 ——> 點選’Build Phases‘ ——> 點選‘Link Binary With Libraries’ ——> 點選左下方‘+’ ——> 選中‘libART.a’添加。

參考連結:

react native 常見問題總結
react native ios添加ART.xcodeproj（ReactNative No component found for view with name “ARTSurfaceView”）

16.編譯出現”_BZ2_bzRead”, referenced from:”

在工程target的Build Phases->Link Binary with Libraries中加入libz.tbd、libbz2.1.0.tbd

參考連結

xcode 新工程按照指令內建後編譯報錯

17.使用realm停止在Downloading XXXXXX

這是因為某些原因影響到下載下傳，可以手動下載下傳，運作 ‘open $TMPDIR’，将下載下傳檔案拷貝其中，如果下載下傳邏輯中有對時間的判斷還需要處理下，可以根據下載下傳檔案忽略

參考連結

https://github.com/realm/realm-js/issues/1223

18.

Bundling `index.ios.js` [development, non-minified] 0.0% (0/1), failed. error: bundling failed: ambiguous resolution: module `/Users/bingbing/Poem/PoemRN/index.ios.js` tries to require `react-native`, but there are several files providing this module. You can delete or fix them: * `/Users/bingbing/Poem/PoemRN/node_modules/autoresponsive-react-native/node_modules/react-native/package.json` * `/Users/bingbing/Poem/PoemRN/node_modules/react-native/package.json`

1 2 3 4 5

Bundling ` index . ios . js ` [ development , non - minified ] 0.0 % ( 0 / 1 ) , failed . error : bundling failed : ambiguous resolution : module ` / Users / bingbing / Poem / PoemRN / index . ios . js ` tries to require ` react - native ` , but there are several files providing this module . You can delete or fix them : * ` / Users / bingbing / Poem / PoemRN / node_modules / autoresponsive - react - native / node_modules / react - native / package . json ` * ` / Users / bingbing / Poem / PoemRN / node_modules / react - native / package . json `

運作

yarn start –reset-cache

1	yarn start – reset - cache

若依據無效可能是更新失敗造成，嘗試重新更新

參考連結

Ambiguous resolution

19.Could not determine java version from ‘9.0.1’.，這是由于本機安裝的jdk版本過高，需要切換到低一些的版本

參考連結

Could not determine java version from ‘9.0.1’

20.Caused by: java.lang.UnsupportedOperationException: Can’t convert to color: type=0x1

在android工程中添加color檔案

參考連結

RuntimeException Can’t convert to color:type=0x1

21.送出小米應用商店 monkey測試出現

java.lang.NullPointerException: Attempt to invoke virtual method ‘java.io.File java.io.File.getParentFile()’ on a null object reference, stack:

1 2	java . lang . NullPointerException : Attempt to invoke virtual method ‘java.io.File java.io.File.getParentFile()’ on a null object reference , stack :

應該是react-native-fetch-blob的一個bug

修改檔案路徑:[project]/node_modules/react-native-fetch-blob/android/src/main/java/com/RNFetchBlobFS

将

- res.put(“SDCardApplicationDir”,ctx.getExternalFilesDir(null).getParentFile().getAbsolutePath());

1 2	- res . put ( “SDCardApplicationDir” , ctx . getExternalFilesDir ( null ) . getParentFile ( ) . getAbsolutePath ( ) ) ;

修改為

java
 + File externalFilesDir = ctx.getExternalFilesDir(null);
 + if(externalFilesDir != null) {
 + res.put("SDCardApplicationDir", externalFilesDir.getParentFile().getAbsolutePath());
 + } else {
 + res.put("SDCardApplicationDir", Environment.getExternalStorageDirectory().getAbsolutePath());
 + }

【轉】ReactNative開發之疑難雜症

參考連結

– fixed getExternalFilesDir null issue

原文連結

【轉】ReactNative開發之疑難雜症

參考連結

繼續閱讀

ReactNative橋接原生View和ViewGroup

react應用更新引入react-native-code-push

react-native 擷取手機imei碼

[RN]一個模版

react native android 高德地圖原生代碼編寫react native android 高德地圖原生代碼編寫

error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65.- RN

react native學習筆記24——Modal實作自定義彈出對話框

React-Native自定義PopupWindow實作

react-native 真機打開開發者菜單adb指令

【轉】關于React Navigation的一些使用技巧一、開源庫介紹二、react-navigation使用三、DrawerNavigator實作抽屜導航四、自定義react-navigation五、效果圖

react-native學習(1)

macos 更新 react-native 報錯

晦澀的翻譯LRU (Least Recently Used) - 最近最少使用？

Flexbox布局樣式

關于reactnatice android 內建離線sourcemap的

setState詳解