react native 混合开发常见问题

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,}

参考:https://github.com/facebook/react-native/issues/16659

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,084评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,623评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,450评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,322评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,370评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,274评论 1 300
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,126评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,980评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,414评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,599评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,773评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,470评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,080评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,713评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,852评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,865评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,689评论 2 354

推荐阅读更多精彩内容