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)資源
在項目的進(jìn)程中仪媒，添加并且移除和處理那些在應(yīng)用程序不是經(jīng)常使用的圖片是很常見的情況沉桌。為了處理這種情況，我們需要找到一個方法來靜態(tài)地定位那些被用在應(yīng)用程序里的圖片。因此蒲牧，我們使用了一個標(biāo)記器撇贺。唯一允許的指向 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相關(guān)的庫冰抢，那么我們來解決這個問題：
第一步：導(dǎo)入必要工程松嘶，在項目工程的Liberaries文件夾下添加必要庫
庫的位置在你的工程文件夾下node_modules/react-native/Libraries/CameraRoll
第二步 Link Binary With Libraries里添加libRCTCameraRoll.a
再次運(yùn)行，問題解決挎扰！
6翠订、使用Navigator時報錯
如圖所示：
報錯原因：
在使用Navigator.NavigationBar時routeMapper設(shè)置的不對（LeftButton、RightButton遵倦、Title 缺一不可）
解決方法：
把缺少的控件補(bǔ)充上
參考代碼如下：
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)文件到自己的目錄下進(jìn)行修改使用，打離線包提示文件名稱沖突
解決方法：把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進(jìn)行布局設(shè)置
悄悄的巩踏，我出現(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運(yùn)行最新版的react native工程報錯
原因：init命令默認(rèn)會創(chuàng)建最新的版本塞琼，而目前最新的0.45版本需要下載boost庫編譯。此庫體積龐大禁舷，在國內(nèi)即便翻墻也很難下載成功彪杉，導(dǎo)致很多人無法正常運(yùn)行iOS項目，推薦暫時使用0.44.3的版本牵咙。
13派近、使用react-native-swipe-list-view插件，點擊某行時顯現(xiàn)隱藏內(nèi)容
解決方法：使用TouchableHighlight組件代替TouchableOpacity并設(shè)置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
從網(wǎng)上下載別人的ReactNative項目，打開iOS項目的時候战坤，xcode會報錯，提示：“RCTBundleURLProvider.h” file not found
原因：node_modules文件夾下的包和當(dāng)前版本不匹配
解決方法：
1残拐、打開Mac里面的終端途茫，進(jìn)入項目所在的文件夾目錄；
2溪食、把項目里面的 node_modules 文件夾刪除掉囊卜，然后執(zhí)行 npm install 命令
3、npm install安裝完成后， 執(zhí)行react-native upgrade命令
4栅组、最后重新打開Xcode,clean一下雀瓢，應(yīng)該就沒有問題了。
15玉掸、運(yùn)行工程控制臺一直輸入如下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運(yùn)行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/
注意：前提是你已經(jīng)安裝了xcode
參考：http://blog.csdn.net/u010411264/article/details/62888873
17、用WebStorm運(yùn)行React-native(Android)工程時出現(xiàn)沒權(quán)限錯誤
解決方法：
在終端執(zhí)行如下命令
$cd/Users/asdc/Desktop/app4boss/android? // 進(jìn)入你的工程的android文件夾下$ chmod +x gradlew
18啊易、react native(ios)運(yùn)行報如下錯誤
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）時沒有進(jìn)行判斷篮奄，可能出現(xiàn)賦個空值（null）的情況。
解決方法：賦值前進(jìn)行判斷
例：
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静汤、網(wǎng)絡(luò)圖片無法顯示問題
原因：在iOS9之后，網(wǎng)絡(luò)請求默認(rèn)為Https請求，如需支持Http仗扬，修改info.plist文件添加鍵值對設(shè)置允許http訪問。
解決方法：
在App Transport Security Settings中添加
Allow Arbitrary Loads
設(shè)置為YES即可籍滴。
參考：http://blog.csdn.net/zww1984774346/article/details/54666746
22执庐、用NetInfo API獲取手機(jī)當(dāng)前網(wǎng)絡(luò)狀態(tài)，iOS獲取網(wǎng)絡(luò)狀態(tài)一直是false
現(xiàn)象：
iOS單獨使用
NetInfo.isConnected.fetch().done((isConnected) =>{console.log('First, is '+ (isConnected ?'online':'offline'));});
獲取網(wǎng)絡(luò)狀態(tài)一直顯示為false
解決方法：
添加監(jiān)聽網(wǎng)絡(luò)狀態(tài)改變的方法酒繁，配合獲取網(wǎng)絡(luò)狀態(tài)的方法一起使用即可
componentWillMount() {? ? ? ? NetInfo.fetch().done((status)=>{console.log('Status:'+ status);? ? ? ? });//監(jiān)聽網(wǎng)絡(luò)狀態(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 網(wǎng)絡(luò)請求超時處理
解決方法：
引入一個polyfill文件，然后在自己的網(wǎng)絡(luò)請求方法里州袒，采用它定義的fetch方法揭绑，就可以設(shè)置timeout參數(shù)，進(jìn)行網(wǎng)絡(luò)超時限制
例：
// 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所有的代碼，復(fù)制到文本編譯器中找到72745行亥至，就可以定位問題所在悼沈，找到該代碼所屬的文件贱迟，fontSize定義有重復(fù)，刪除重復(fù)定義絮供，Android上就可以跑通了衣吠。
參考：http://blog.csdn.net/xu0511522/article/details/55214254
26、 使用react-native-swiper插件布局顯示錯誤問題
現(xiàn)象：
正確顯示：
錯誤顯示：
原因：
Swiper外層View沒有設(shè)置大小(主要是height)壤靶，如圖所示
解決方法：
return(? ? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? activeDot={? ? ? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? paginationStyle={{? ? ? ? ? ? ? ? ? ? ? ? ? ? bottom:10}}? ? ? ? ? ? >? ? ? ? ? {? ? ? ? ? ? ? ? this.state.imgList.map((item, i) => ? ? ? ? ? ? ? ? )? ? ? ? ? ? }? ? ? ? ? ? ? ? ? )
27缚俏、 TextInput無法獲取焦點
原因：
沒有給TextInput設(shè)置高度(height)，當(dāng)multiline={true}時不受影響
解決方法：
給TextInput設(shè)置高度(height)即可
28萍肆、 TextInput多行輸入安卓文字居中顯示問題
現(xiàn)象：
解決方法：
設(shè)置textAlignVertical:'top'（文本垂直方向布局）屬性即可實現(xiàn)下面效果
29袍榆、React Native在Android平臺無法運(yùn)行g(shù)if
解決方法：
使用facebook fresco
要解決上面的問題，方法還是很多的塘揣，最簡單的莫過于使用facebook的jar支持庫包雀，在android/app/build.gradle文件中新增
compile'com.facebook.fresco:animated-gif:0.13.0'
Fresco是一個強(qiáng)大的圖片加載組件，Android 本身的圖片庫不支持此格式亲铡，但是Fresco支持才写。使用時，和往常一樣奖蔓，僅僅需要提供一個圖片的URI即可赞草，剩下的事情，F(xiàn)resco會處理吆鹤。
如我們運(yùn)行一個名為loading.gif的圖片：
參考：http://blog.csdn.net/xiangzhihong8/article/details/55803237?1487761206687
30厨疙、 view下方出現(xiàn)一條橫線
現(xiàn)象：
正確顯示：
錯誤顯示：
原因：
view設(shè)置的高度為小數(shù)
解決方法：
view高度設(shè)置成整數(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.reibang.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,}
