1、react listview最上方空白
如圖所示：
解決方法：
automaticallyAdjustContentInsets屬性為scrollview的iOS版本屬性
具體可參考：http://reactnative.cn/docs/0.28/scrollview.html#content
2、listview的rowID值為s1
如圖所示：
解決方法：
使用listview的rowID時，必須把參數(shù)sectionID也寫上，否則此時的rowID代表的是sectionID，它會自動頂替sectionID的位置
renderRow(rowData:string,sectionID:number,rowID:number)
3、判斷相等
判斷數(shù)字相等用==
判斷字符串相等用===
4、source={require('image!name-of-the-asset')}
表示搜索靜態(tài)資源
在項目的進程中，添加并且移除和處理那些在應用程序不是經常使用的圖片是很常見的情況。為了處理這種情況，我們需要找到一個方法來靜態(tài)地定位那些被用在應用程序里的圖片。因此，我們使用了一個標記器。唯一允許的指向 bundle 里的圖片的方法就是在源文件中遍歷地搜索require('image!name-of-the-asset')
參考：http://wiki.jikexueyuan.com/project/react-native/image.html
5、ReactNative報錯：undefined is not an object(evaluating 'RCTCameraRollManager.getPhotos')
報錯原因是工程里沒有添加CameraRoll相關的庫，那么我們來解決這個問題：
第一步：導入必要工程，在項目工程的Liberaries文件夾下添加必要庫
庫的位置在你的工程文件夾下node_modules/react-native/Libraries/CameraRoll
第二步 Link Binary With Libraries里添加libRCTCameraRoll.a
再次運行，問題解決！
6、使用Navigator時報錯
如圖所示：
報錯原因：
在使用Navigator.NavigationBar時routeMapper設置的不對（LeftButton、RightButton、Title 缺一不可）
解決方法：
把缺少的控件補充上
參考代碼如下：
varNavigationBarRouteMapper = {LeftButton:function(route, navigator, index, navState){if(route.id ==='main') {returnnull;? ? }varpreviousRoute = navState.routeStack[index -1];return(navigator.pop()}? ? ? ? style={styles.navBarLeftButton}>back);? },RightButton:function(route, navigator, index, navState){returnnull;//不想顯示可以返回空},Title:function(route, navigator, index, navState){return({route.title});? }, };
7、使用系統(tǒng)js文件（node_modules中的）打離線包出錯
copy系統(tǒng)文件到自己的目錄下進行修改使用，打離線包提示文件名稱沖突
解決方法：把copy的系統(tǒng)文件中的注釋去掉即可
注釋如圖所示：
屏幕快照 2016-12-06 上午9.32.26.png
8、使用StatusBar后界面顯示不出來
解決方法：給view添加flex:1樣式
代碼如下：
{? ? ? ? ? ? ? ? if(route.sceneConfig) {? ? ? ? ? ? ? ? ? ? return route.sceneConfig;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? return Navigator.SceneConfigs.FloatFromBottom;? ? ? ? ? ? }}? ? ? ? ? ? />
9、在TouchableOpacity中嵌套ScrollView會屏蔽ScrollView的滾動
解決方法：ScrollView不用嵌套在TouchableOpacity中，用absolute來布局
this._pressRow(rowData)} >{'工作空間：'+arr[2]}{rowData.time}this._pressRow(rowData)} >{'全名：'+arr[0]+'/'+arr[1]+'/'+arr[2]}
scrollView: {flex:1,? ? ? ? height:30,? ? ? ? paddingTop:8,? ? ? ? marginRight:20,? ? ? ? position:'absolute',? ? ? ? left: (Dimensions.get('window').width) /8+12,? ? ? ? right:20,? ? ? ? top:30,? ? },
10、Android使用Animated.View時動畫視圖顯示不出來
解決方法：給Animated.View進行布局設置
悄悄的，我出現(xiàn)了
myAnimated: {position:'absolute',? ? ? ? right:0,? ? ? ? bottom:0,? ? ? height:49,? ? ? width:Dimensions.get('window').width,? ? ? backgroundColor:'red',? ? ? alignItems:'center',? ? ? justifyContent:'center',? },
11、使用npm安裝react-native-scrollable-tab-view插件出錯
現(xiàn)象：會刪除node_modules文件夾中的部分文件
解決方法：將安裝命令換成$ yarn add react-native-scrollable-tab-view
12、ios運行最新版的react native工程報錯
原因：init命令默認會創(chuàng)建最新的版本，而目前最新的0.45版本需要下載boost庫編譯。此庫體積龐大，在國內即便翻墻也很難下載成功，導致很多人無法正常運行iOS項目，推薦暫時使用0.44.3的版本。
13、使用react-native-swipe-list-view插件，點擊某行時顯現(xiàn)隱藏內容
解決方法：使用TouchableHighlight組件代替TouchableOpacity并設置underlayColor為你想要顯示的點擊狀態(tài)下的顏色。
例：
renderRow (rowData, sectionID, rowID) {return(I am {rowData.row} in a SwipeListViewI am {""+rowData.isSelect});}
具體參考：https://github.com/jemise111/react-native-swipe-list-view/issues/116
14、RN項目報錯“RCTBundleURLProvider.h” file not found
從網上下載別人的ReactNative項目，打開iOS項目的時候，xcode會報錯，提示：“RCTBundleURLProvider.h” file not found
原因：node_modules文件夾下的包和當前版本不匹配
解決方法：
1、打開Mac里面的終端，進入項目所在的文件夾目錄；
2、把項目里面的 node_modules 文件夾刪除掉，然后執(zhí)行 npm install 命令
3、npm install安裝完成后， 執(zhí)行react-native upgrade命令
4、最后重新打開Xcode,clean一下，應該就沒有問題了。
15、運行工程控制臺一直輸入如下log
nw_connection_get_connected_socket_block_invoke 2147 Connection has no connected handler
解決方法：
1、Xcode menu -> Product -> Edit Scheme...
2、Environment Variables -> Add -> Name: "OS_ACTIVITY_MODE", Value:"disable"
3、Run again
16、 用WebStorm運行React-native(iOS)工程時出現(xiàn)如下錯誤
xcrun: error: unable to find utility"instruments",nota developer toolorinPATH
解決方法：
在終端執(zhí)行如下命令
sudo xcode-select -s /Applications/Xcode.app/Contents/Developer/
注意：前提是你已經安裝了xcode
參考：http://blog.csdn.net/u010411264/article/details/62888873
17、用WebStorm運行React-native(Android)工程時出現(xiàn)沒權限錯誤
解決方法：
在終端執(zhí)行如下命令
$cd/Users/asdc/Desktop/app4boss/android? // 進入你的工程的android文件夾下$ chmod +x gradlew
18、react native(ios)運行報如下錯誤
ReactNative No component foundforviewwithname “ARTSurfaceView”
原因：缺少ART庫
ART庫所在的目錄：node_modules/reactnative/Libraries/ART/ART.xcodeproj
解決方法：
1、添加ART.xcodeproj庫
2、點擊’Build Phases‘ ——> 點擊‘Link Binary With Libraries’ ——> 點擊左下方‘+’ ——> 選中‘libART.a’添加
參考：http://blog.csdn.net/u010940770/article/details/71126700
19、出現(xiàn)如圖所示警告
原因：在給屬性賦值（setState）時沒有進行判斷，可能出現(xiàn)賦個空值（null）的情況。
解決方法：賦值前進行判斷
例：
componentWillMount() {? ? ? ? AsyncStorage.getItem(userNameKey)? ? ? ? ? ? .then((value1) =>{if(value1) {//這里添加了判斷this.setState({userName: value1});? ? ? ? ? ? ? ? ? ? AsyncStorage.getItem(passwordKey)? ? ? ? ? ? ? ? ? ? ? ? .then((value2) =>{if(value2) {//這里添加了判斷this.setState({password: value2});? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? AsyncStorage.getItem(isLoginKey).then((value) =>{if(value ==='true') {this.login()? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? });? ? ? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? })? ? ? ? ? ? ? ? ? ? ? ? .catch((err) =>{console.log(err);? ? ? ? ? ? ? ? ? ? ? ? });? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? ? ? })? ? ? ? ? ? .catch((err) =>{console.log(err);? ? ? ? ? ? });? ? }
20、使用react-native-scrollable-tab-view插件，首次渲染界面顯示不出選中tab下方的下劃線
0.6.7版本有該問題
解決方法：修改插件源文件ScrollableTabBar.js把里面的this.props.scrollValue._value方法替換成this.props.scrollValue.__getValue()即可
參考：https://github.com/skv-headless/react-native-scrollable-tab-view/issues/672
21、網絡圖片無法顯示問題
原因：在iOS9之后，網絡請求默認為Https請求，如需支持Http，修改info.plist文件添加鍵值對設置允許http訪問。
解決方法：
在App Transport Security Settings中添加
Allow Arbitrary Loads
設置為YES即可。
參考：http://blog.csdn.net/zww1984774346/article/details/54666746
22、用NetInfo API獲取手機當前網絡狀態(tài)，iOS獲取網絡狀態(tài)一直是false
現(xiàn)象：
iOS單獨使用
NetInfo.isConnected.fetch().done((isConnected) =>{console.log('First, is '+ (isConnected ?'online':'offline'));});
獲取網絡狀態(tài)一直顯示為false
解決方法：
添加監(jiān)聽網絡狀態(tài)改變的方法，配合獲取網絡狀態(tài)的方法一起使用即可
componentWillMount() {? ? ? ? NetInfo.fetch().done((status)=>{console.log('Status:'+ status);? ? ? ? });//監(jiān)聽網絡狀態(tài)改變NetInfo.addEventListener('change',this.handleConnectivityChange);? ? }? ? componentWillUnMount() {console.log("componentWillUnMount");? ? ? ? NetInfo.removeEventListener('change',this.handleConnectivityChange);? ? }? ? handleConnectivityChange(status) {console.log('status change:'+ status);//監(jiān)聽第一次改變后, 可以取消監(jiān)聽.或者在componentUnmount中取消監(jiān)聽// NetInfo.removeEventListener('change', this.handleConnectivityChange);}
23、react-native 網絡請求超時處理
解決方法：
引入一個polyfill文件，然后在自己的網絡請求方法里，采用它定義的fetch方法，就可以設置timeout參數(shù)，進行網絡超時限制
例：
// https://github.com/robinpowered/react-native-fetch-polyfillimportfetchfrom'./fetch-polyfill';console.warn("fetch url: "+ url);? getData(url, callback) {? ? fetch(url, {method:'GET',headers: {'Content-Type':'application/x-www-form-urlencoded'},timeout:20*1000})? ? ? .then((response) =>response.json())? ? ? .then((responseData) =>{console.warn("response code:"+ responseData.code)if(responseData.code ==="C0000"|| responseData.code ==="1000"|| responseData.code ===1000) {console.warn("response:"+ responseData.data);? ? ? ? ? ? callback(responseData.data,0);? ? ? ? ? }else{? ? ? ? ? ? callback(responseData,-1);? ? ? ? ? }? ? ? ? }).catch(error=>{// an error when the request fails, such as during a timeoutcallback(null,-1);? ? ? ? ? ? });? ? ? }}module.exports = {? ? getData}
參考：http://blog.csdn.net/cdkd123/article/details/72678293
24、npm install xxx 報如下錯誤
$ added 1 packages, removed 580 packages and updated 1 package in 13.248s
原因：使用的是npm版本5，該版本的npm目前還存在很多問題。
解決方法：使用npm4
npm install -g npm@4rm -rf node_modulesrmpackage-lock.jsonnpm install
參考：https://stackoverflow.com/questions/44860917/create-react-app-not-working
25、 Android 報錯 react native syntaxError:Attempted to redefine property "fontSize"（line 72745）
解決方法：先在瀏覽器中輸入http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false，在打開的界面中 copy所有的代碼，復制到文本編譯器中找到72745行，就可以定位問題所在，找到該代碼所屬的文件，fontSize定義有重復，刪除重復定義，Android上就可以跑通了。
參考：http://blog.csdn.net/xu0511522/article/details/55214254
26、 使用react-native-swiper插件布局顯示錯誤問題
現(xiàn)象：
正確顯示：
錯誤顯示：
原因：
Swiper外層View沒有設置大小(主要是height)，如圖所示
解決方法：
return(? ? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? activeDot={? ? ? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? paginationStyle={{? ? ? ? ? ? ? ? ? ? ? ? ? ? bottom:10}}? ? ? ? ? ? >? ? ? ? ? {? ? ? ? ? ? ? ? this.state.imgList.map((item, i) => ? ? ? ? ? ? ? ? )? ? ? ? ? ? }? ? ? ? ? ? ? ? ? )
27、 TextInput無法獲取焦點
原因：
沒有給TextInput設置高度(height)，當multiline={true}時不受影響
解決方法：
給TextInput設置高度(height)即可
28、 TextInput多行輸入安卓文字居中顯示問題
現(xiàn)象：
解決方法：
設置textAlignVertical:'top'（文本垂直方向布局）屬性即可實現(xiàn)下面效果
29、React Native在Android平臺無法運行gif
解決方法：
使用facebook fresco
要解決上面的問題，方法還是很多的，最簡單的莫過于使用facebook的jar支持庫，在android/app/build.gradle文件中新增
compile'com.facebook.fresco:animated-gif:0.13.0'
Fresco是一個強大的圖片加載組件，Android 本身的圖片庫不支持此格式，但是Fresco支持。使用時，和往常一樣，僅僅需要提供一個圖片的URI即可，剩下的事情，F(xiàn)resco會處理。
如我們運行一個名為loading.gif的圖片：
參考：http://blog.csdn.net/xiangzhihong8/article/details/55803237?1487761206687
30、 view下方出現(xiàn)一條橫線
現(xiàn)象：
正確顯示：
錯誤顯示：
原因：
view設置的高度為小數(shù)
解決方法：
view高度設置成整數(shù)
varcellHeight = screen.height >723? (system.isIphoneX ? (screen.height -150-150-10-64-49-22-34)/2+5:(system.isIOS?screen.height -150-150-10-64-49:screen.height -150-150-10-56-10-49)/2+5) :155cellHeight =parseInt(cellHeight)
31、 報NetInfo's "change" event is deprecated. Listen to the "connectionChange" event instead.警告
現(xiàn)象：RN從0.44升級到0.50出現(xiàn)NetInfo's "change" event is deprecated. Listen to the "connectionChange" event instead.警告
解決方法：
把下面代碼中的change
NetInfo.isConnected.removeEventListener('change',? ? handleFirstConnectivityChange? );NetInfo.isConnected.addEventListener('change',? handleFirstConnectivityChange);
改成connectionChange
NetInfo.isConnected.removeEventListener('connectionChange',? ? handleFirstConnectivityChange? );NetInfo.isConnected.addEventListener('connectionChange',? handleFirstConnectivityChange);
解決方法：
使用
return(Inside);
參考：http://www.lxweimin.com/p/92ddd922d775
33、報錯 undefined is not an object (evaluating 'n.View.propTypes.style')
原因：
If this issue is happening with RN 0.49, check for View.propTypes which no longer exists. Use ViewPropTypes instead.
解決方法：
使用ViewPropTypes代替View.propTypes
importPropTypesfrom'prop-types';importViewPropTypesfrom'ViewPropTypes';staticpropTypes = {style: Text.propTypes.style,imgStyle: ViewPropTypes.style,titleStyle: PropTypes.any,title: PropTypes.string,source: PropTypes.any,}
