1、react listview最上方空白
如图所示:
解决方法:
automaticallyAdjustContentInsets属性为scrollview的iOS版本属性
具体可参考:http://reactnative.cn/docs/0.28/scrollview.html#content
2、listview的rowID值为s1
如图所示:
解决方法:
使用listview的rowID时,必须把参数sectionID也写上,否则此时的rowID代表的是sectionID,它会自动顶替sectionID的位置
renderRow(rowData:string,sectionID:number,rowID:number)
3、判断相等
判断数字相等用==
判断字符串相等用===
4、source={require('image!name-of-the-asset')}
表示搜索静态资源
在项目的进程中,添加并且移除和处理那些在应用程序不是经常使用的图片是很常见的情况。为了处理这种情况,我们需要找到一个方法来静态地定位那些被用在应用程序里的图片。因此,我们使用了一个标记器。唯一允许的指向 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、使用系统js文件(node_modules中的)打离线包出错
copy系统文件到自己的目录下进行修改使用,打离线包提示文件名称冲突
解决方法:把copy的系统文件中的注释去掉即可
注释如图所示:
屏幕快照 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进行布局设置
悄悄的,我出现了
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插件出错
现象:会删除node_modules文件夹中的部分文件
解决方法:将安装命令换成$ yarn add react-native-scrollable-tab-view
12、ios运行最新版的react native工程报错
原因:init命令默认会创建最新的版本,而目前最新的0.45版本需要下载boost库编译。此库体积庞大,在国内即便翻墙也很难下载成功,导致很多人无法正常运行iOS项目,推荐暂时使用0.44.3的版本。
13、使用react-native-swipe-list-view插件,点击某行时显现隐藏内容
解决方法:使用TouchableHighlight组件代替TouchableOpacity并设置underlayColor为你想要显示的点击状态下的颜色。
例:
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 文件夹删除掉,然后执行 npm install 命令
3、npm install安装完成后, 执行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)工程时出现如下错误
xcrun: error: unable to find utility"instruments",nota developer toolorinPATH
解决方法:
在终端执行如下命令
sudo xcode-select -s /Applications/Xcode.app/Contents/Developer/
注意:前提是你已经安装了xcode
参考:http://blog.csdn.net/u010411264/article/details/62888873
17、用WebStorm运行React-native(Android)工程时出现没权限错误
解决方法:
在终端执行如下命令
$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、出现如图所示警告
原因:在给属性赋值(setState)时没有进行判断,可能出现赋个空值(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获取手机当前网络状态,iOS获取网络状态一直是false
现象:
iOS单独使用
NetInfo.isConnected.fetch().done((isConnected) =>{console.log('First, is '+ (isConnected ?'online':'offline'));});
获取网络状态一直显示为false
解决方法:
添加监听网络状态改变的方法,配合获取网络状态的方法一起使用即可
componentWillMount() { NetInfo.fetch().done((status)=>{console.log('Status:'+ status); });//监听网络状态改变NetInfo.addEventListener('change',this.handleConnectivityChange); } componentWillUnMount() {console.log("componentWillUnMount"); NetInfo.removeEventListener('change',this.handleConnectivityChange); } handleConnectivityChange(status) {console.log('status change:'+ status);//监听第一次改变后, 可以取消监听.或者在componentUnmount中取消监听// NetInfo.removeEventListener('change', this.handleConnectivityChange);}
23、react-native 网络请求超时处理
解决方法:
引入一个polyfill文件,然后在自己的网络请求方法里,采用它定义的fetch方法,就可以设置timeout参数,进行网络超时限制
例:
// 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插件布局显示错误问题
现象:
正确显示:
错误显示:
原因:
Swiper外层View没有设置大小(主要是height),如图所示
解决方法:
return( } activeDot={ } paginationStyle={{ bottom:10}} > { this.state.imgList.map((item, i) => ) } )
27、 TextInput无法获取焦点
原因:
没有给TextInput设置高度(height),当multiline={true}时不受影响
解决方法:
给TextInput设置高度(height)即可
28、 TextInput多行输入安卓文字居中显示问题
现象:
解决方法:
设置textAlignVertical:'top'(文本垂直方向布局)属性即可实现下面效果
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即可,剩下的事情,Fresco会处理。
如我们运行一个名为loading.gif的图片:
参考:http://blog.csdn.net/xiangzhihong8/article/details/55803237?1487761206687
30、 view下方出现一条横线
现象:
正确显示:
错误显示:
原因:
view设置的高度为小数
解决方法:
view高度设置成整数
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.警告
现象:RN从0.44升级到0.50出现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);
参考:https://www.jianshu.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,}