1、react listview最上方空白
如圖所示：
解決方法：
automaticallyAdjustContentInsets屬性為scrollview的iOS版本屬性
具體可參考：http://reactnative.cn/docs/0.28/scrollview.html#content
2、listview的rowID值為s1
如圖所示：
解決方法：
使用listview的rowID時(shí)，必須把參數(shù)sectionID也寫上，否則此時(shí)的rowID代表的是sectionID，它會(huì)自動(dòng)頂替sectionID的位置
renderRow(rowData:string,sectionID:number,rowID:number)
3、判斷相等
判斷數(shù)字相等用==
判斷字符串相等用===
4、source={require('image!name-of-the-asset')}
表示搜索靜態(tài)資源
在項(xiàng)目的進(jìn)程中，添加并且移除和處理那些在應(yīng)用程序不是經(jīng)常使用的圖片是很常見的情況。為了處理這種情況，我們需要找到一個(gè)方法來(lái)靜態(tài)地定位那些被用在應(yīng)用程序里的圖片。因此，我們使用了一個(gè)標(biāo)記器。唯一允許的指向 bundle 里的圖片的方法就是在源文件中遍歷地搜索require('image!name-of-the-asset')
參考：http://wiki.jikexueyuan.com/project/react-native/image.html
5、ReactNative報(bào)錯(cuò)：undefined is not an object(evaluating 'RCTCameraRollManager.getPhotos')
報(bào)錯(cuò)原因是工程里沒有添加CameraRoll相關(guān)的庫(kù)，那么我們來(lái)解決這個(gè)問(wèn)題：
第一步：導(dǎo)入必要工程，在項(xiàng)目工程的Liberaries文件夾下添加必要庫(kù)
庫(kù)的位置在你的工程文件夾下node_modules/react-native/Libraries/CameraRoll
第二步 Link Binary With Libraries里添加libRCTCameraRoll.a
再次運(yùn)行，問(wèn)題解決！
6、使用Navigator時(shí)報(bào)錯(cuò)
如圖所示：
報(bào)錯(cuò)原因：
在使用Navigator.NavigationBar時(shí)routeMapper設(shè)置的不對(duì)（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中的）打離線包出錯(cuò)
copy系統(tǒng)文件到自己的目錄下進(jìn)行修改使用，打離線包提示文件名稱沖突
解決方法：把copy的系統(tǒng)文件中的注釋去掉即可
注釋如圖所示：
屏幕快照 2016-12-06 上午9.32.26.png
8、使用StatusBar后界面顯示不出來(lái)
解決方法：給view添加flex:1樣式
代碼如下：
{? ? ? ? ? ? ? ? if(route.sceneConfig) {? ? ? ? ? ? ? ? ? ? return route.sceneConfig;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? return Navigator.SceneConfigs.FloatFromBottom;? ? ? ? ? ? }}? ? ? ? ? ? />
9、在TouchableOpacity中嵌套ScrollView會(huì)屏蔽ScrollView的滾動(dòng)
解決方法：ScrollView不用嵌套在TouchableOpacity中，用absolute來(lái)布局
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時(shí)動(dòng)畫視圖顯示不出來(lái)
解決方法：給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插件出錯(cuò)
現(xiàn)象：會(huì)刪除node_modules文件夾中的部分文件
解決方法：將安裝命令換成$ yarn add react-native-scrollable-tab-view
12、ios運(yùn)行最新版的react native工程報(bào)錯(cuò)
原因：init命令默認(rèn)會(huì)創(chuàng)建最新的版本，而目前最新的0.45版本需要下載boost庫(kù)編譯。此庫(kù)體積龐大，在國(guó)內(nèi)即便翻墻也很難下載成功，導(dǎo)致很多人無(wú)法正常運(yùn)行iOS項(xiàng)目，推薦暫時(shí)使用0.44.3的版本。
13、使用react-native-swipe-list-view插件，點(diǎn)擊某行時(shí)顯現(xiàn)隱藏內(nèi)容
解決方法：使用TouchableHighlight組件代替TouchableOpacity并設(shè)置underlayColor為你想要顯示的點(diǎn)擊狀態(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項(xiàng)目報(bào)錯(cuò)“RCTBundleURLProvider.h” file not found
從網(wǎng)上下載別人的ReactNative項(xiàng)目，打開iOS項(xiàng)目的時(shí)候，xcode會(huì)報(bào)錯(cuò)，提示：“RCTBundleURLProvider.h” file not found
原因：node_modules文件夾下的包和當(dāng)前版本不匹配
解決方法：
1、打開Mac里面的終端，進(jìn)入項(xiàng)目所在的文件夾目錄；
2、把項(xiàng)目里面的 node_modules 文件夾刪除掉，然后執(zhí)行 npm install 命令
3、npm install安裝完成后， 執(zhí)行react-native upgrade命令
4、最后重新打開Xcode,clean一下，應(yīng)該就沒有問(wèn)題了。
15、運(yùn)行工程控制臺(tái)一直輸入如下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)工程時(shí)出現(xiàn)如下錯(cuò)誤
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)工程時(shí)出現(xiàn)沒權(quán)限錯(cuò)誤
解決方法：
在終端執(zhí)行如下命令
$cd/Users/asdc/Desktop/app4boss/android? // 進(jìn)入你的工程的android文件夾下$ chmod +x gradlew
18、react native(ios)運(yùn)行報(bào)如下錯(cuò)誤
ReactNative No component foundforviewwithname “ARTSurfaceView”
原因：缺少ART庫(kù)
ART庫(kù)所在的目錄：node_modules/reactnative/Libraries/ART/ART.xcodeproj
解決方法：
1、添加ART.xcodeproj庫(kù)
2、點(diǎn)擊’Build Phases‘ ——> 點(diǎn)擊‘Link Binary With Libraries’ ——> 點(diǎn)擊左下方‘+’ ——> 選中‘libART.a’添加
參考：http://blog.csdn.net/u010940770/article/details/71126700
19、出現(xiàn)如圖所示警告
原因：在給屬性賦值（setState）時(shí)沒有進(jìn)行判斷，可能出現(xiàn)賦個(gè)空值（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版本有該問(wèn)題
解決方法：修改插件源文件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ò)圖片無(wú)法顯示問(wèn)題
原因：在iOS9之后，網(wǎng)絡(luò)請(qǐng)求默認(rèn)為Https請(qǐng)求，如需支持Http，修改info.plist文件添加鍵值對(duì)設(shè)置允許http訪問(wèn)。
解決方法：
在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單獨(dú)使用
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ò)請(qǐng)求超時(shí)處理
解決方法：
引入一個(gè)polyfill文件，然后在自己的網(wǎng)絡(luò)請(qǐng)求方法里，采用它定義的fetch方法，就可以設(shè)置timeout參數(shù)，進(jìn)行網(wǎng)絡(luò)超時(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 報(bào)如下錯(cuò)誤
$ added 1 packages, removed 580 packages and updated 1 package in 13.248s
原因：使用的是npm版本5，該版本的npm目前還存在很多問(wèn)題。
解決方法：使用npm4
npm install -g npm@4rm -rf node_modulesrmpackage-lock.jsonnpm install
參考：https://stackoverflow.com/questions/44860917/create-react-app-not-working
25、 Android 報(bào)錯(cuò) 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行，就可以定位問(wèn)題所在，找到該代碼所屬的文件，fontSize定義有重復(fù)，刪除重復(fù)定義，Android上就可以跑通了。
參考：http://blog.csdn.net/xu0511522/article/details/55214254
26、 使用react-native-swiper插件布局顯示錯(cuò)誤問(wèn)題
現(xiàn)象：
正確顯示：
錯(cuò)誤顯示：
原因：
Swiper外層View沒有設(shè)置大小(主要是height)，如圖所示
解決方法：
return(? ? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? activeDot={? ? ? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? paginationStyle={{? ? ? ? ? ? ? ? ? ? ? ? ? ? bottom:10}}? ? ? ? ? ? >? ? ? ? ? {? ? ? ? ? ? ? ? this.state.imgList.map((item, i) => ? ? ? ? ? ? ? ? )? ? ? ? ? ? }? ? ? ? ? ? ? ? ? )
27、 TextInput無(wú)法獲取焦點(diǎn)
原因：
沒有給TextInput設(shè)置高度(height)，當(dāng)multiline={true}時(shí)不受影響
解決方法：
給TextInput設(shè)置高度(height)即可
28、 TextInput多行輸入安卓文字居中顯示問(wèn)題
現(xiàn)象：
解決方法：
設(shè)置textAlignVertical:'top'（文本垂直方向布局）屬性即可實(shí)現(xiàn)下面效果
29、React Native在Android平臺(tái)無(wú)法運(yùn)行g(shù)if
解決方法：
使用facebook fresco
要解決上面的問(wèn)題，方法還是很多的，最簡(jiǎn)單的莫過(guò)于使用facebook的jar支持庫(kù)，在android/app/build.gradle文件中新增
compile'com.facebook.fresco:animated-gif:0.13.0'
Fresco是一個(gè)強(qiáng)大的圖片加載組件，Android 本身的圖片庫(kù)不支持此格式，但是Fresco支持。使用時(shí)，和往常一樣，僅僅需要提供一個(gè)圖片的URI即可，剩下的事情，F(xiàn)resco會(huì)處理。
如我們運(yùn)行一個(gè)名為loading.gif的圖片：
參考：http://blog.csdn.net/xiangzhihong8/article/details/55803237?1487761206687
30、 view下方出現(xiàn)一條橫線
現(xiàn)象：
正確顯示：
錯(cuò)誤顯示：
原因：
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、 報(bào)NetInfo's "change" event is deprecated. Listen to the "connectionChange" event instead.警告
現(xiàn)象：RN從0.44升級(jí)到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://m.itdecent.cn/p/92ddd922d775
33、報(bào)錯(cuò) 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,}
