我在react native踩过的坑(持续更新...)

2017-03-24  本文已影响459人  程序人生_小龙

坑.js

1.对于对css没经验和js没经验的同学,在看FB提供的组件文档时,把组件写在了view上,但是为什么没有在模拟器中渲染出来呢?并且没有报错。

对于这样的情况,请设置高度和宽度

组件放在View里面需要给view设置宽高

2.Warning: setState(...): Cannot update during an existing state transition (such as withinrenderor another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved tocomponentWillMount。当报这类错误时,说明你的props和states在渲染的时候更改了。

此时应该用匿名函数 ()=>

ES6箭头函数

3.组件

当图像资源来自网络时不显示图片

此时需要设置宽和高

错误用法 正确用法

4.导入的类必须是大写的

import App from './src/app';正确

import app from './src/app';错误

5.前几天使用AndroidStudio 2.0打开我之前的项目时,编译报了如下错误:

Error:Cause:com/android/build/gradle/internal/model/DefaultAndroidProject : Unsupported major.minorversion52.0

解决办法

方法1直接不用Android Studio 2.0了,转而使用Android Studio 2.2 Preview4编译该项目,继续开发。

方法2在Android Studio 2.0中继续开发该项目,修改build.gradle文件内容,将gradle版本改成2.0.0

6.图片加载不了

例1:

错误

例2:

正确

第一种情况加载不了。

原因:为了使新的图片资源机制正常工作,require中的图片名字必须是一个静态字符串,这是React规定。

7. 为什么要这样写onPress={ () => this.goback() } ,而不是onPress={  this.goback } ?

原因:我认为是为了保持goback函数里this的指向。

8.Github上面有些库执行install命令安装不了

解决:尝试加上--save或者删除--save就可以了!

9.打包后的apk安装包安装后, 替换的图片(应用icon)没有变,还是旧图片?

原因:这应该是你机器本来就安装过测试包了,有了缓存,重启下机器就可以了。

10.Android Studio 找不都模拟器(仿真器)

如下图,在开发Android程序的时候,会发现有时候明明打开了模拟器,但Android Studio中就是找不到,重启后还是一样


解决办法如下:

1可以在/platform-tools/目录下找到adb.exe工具。

2打开cmd,输入下面两条命令

adb kill-server

adb start-server

如果在执行adb start-server的时候报下面这个错误,说明端口被占用了


端口占用了



杀死占用端口的进程

我们把他结束掉,发现他又重新启动了,怎么回事呢,经过排查发现这个进程是模拟器启动的,我们先把模拟器关闭,然后再结束adb.exe这个进程,现在进程管理器里发现这个进程彻底被结束了

现在可以再次执行命令重新启动adb链接

adb start-server

执行结果如下,我们看到命令执行成功了

启动成功

这个时候我们再打开模拟器看看Android Studio是否能连接上模拟器


成功

11.react-native当点击TouchableOpacity时,要点击两下才会触发onPress解决办法

将TouchableOpacity加入到一个scrollView里面然后,scrollView添加属性keyboardShouldPersistTaps属性值设为true,这样就可以只点击一次就能触发onPress了

12 样式

react-native 虽然支持flex布局,但是所有的样式均是css样式的一个很小的集合,尤其是在安卓机下问题尤为凸显:

(1).View内部的元素千万不要超出父级的范围,iso上问题倒是不大,安卓上就什么超出的都看不到了

(2).lineHeight 可以用,不过千万不要写成小数,否则安卓上会直接崩溃

(3).rn的样式不存在继承的情况,所以基本上每个节点都要写style,真的是体力活

(4).如果Text的父级元素设置了背景颜色,那么ios下Text的背景颜色也是父级的背景颜色,要么自己写个Text重置下样式,要么就遇到了再改

(5).react-native的字号是没有设置单位的,所以会随着系统设置的字体大小而变化,我也不知道这是不是坑,不过貌似有的app也没有管这个

13.异常

react-native 在发生js异常的时候,debug的时候会直接红屏幕,但是再release的时候直接会崩溃退出,解决办法

import ErrorUtils from "ErrorUtils";

//这里应该做个判断,如果不是debug的才做这样的异常全局处理

ErrorUtils.setGlobalHandler((e)=>{

//发生异常的处理方法,当然如果是打包好的话可能你找都找不到是哪段代码出问题了

Alert.alert("异常",JSON.stringify(e))

});

14 React-native 网络图片无法加载问题

RN ios无法加载网络图片

暂时就想到了这些,等我好好总结下再写添加吧

上一篇下一篇

猜你喜欢

热点阅读