2016年7月ReactNative跳坑记录
1.添加组件属性,有一个地方需要注意,就是class
属性需要写成 className
,for
属性需要写成 htmlFor
,这是因为 class 和 for 是 JavaScript 的保留字。
2.在genymotion上进行模拟的时候,一定要关闭电脑的防火墙,并且要把手机的wifi连上 (好像5.0以上的版本不会自动连接wifi),将模拟器的ip和端口设置为可访问本机的ip(10.0.3.2:8081
),如果是在手机上的话,也是可以打开网页尝试是否可以访问,可以访问后再将ip添加进genymotion的设置里面。
3.React Native的打包器会首先寻找File.<platform>.js
文件,然后再去寻找 File.js
。这就允许我们将Android平台的代码放置到 File.android.js
, iOS 的放入到 File.ios.js
, 以及Web平台的代码放入到 File.js
, 而不需要改变导入的声明 ./File。
4.在ES6中,变量的解构赋值用途很多,交换变量的值可以用这个奇妙的方法[x, y] = [y, x]。
5.当你Image加载一个网络图片时,如果你不给该Image设置width
和height
,那你将什么都看不到。这还不算,当你使用ListView时如果该组件同时存在一个兄弟元素,那么此时ListView必须设置height
,否则你会发现它不再响应用户的滚动操作。。。这个地方所说的width
和height
是指的在style属性中设置的值,如果直接设置height属性的话是不会起作用的。
6.使用fetch时,当你试图提交附件表单数据的时候,请一定要使用FormData对象将数据包裹如果你只是普通的json提交,就按照官方例子来做:
fetch(API_LOGIN_URL, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
account: this.state.account,
password: this.state.password
})
});
7.FB提供了Dimensions组件可以用来获取屏幕的当前尺寸:
var deviceHeight = Dimensions.get('window').height;
var deviceWidth = Dimensions.get('window').width;
8.当你打算在某个控件上套用设置好的某个样式,但需要单独为其设置一个额外特殊值时,你可以这样:<View style={[styles.demo, {backgroundColor: "blue"}]}></ View>
9.也就是如果Text
元素在Text
里边,可以考虑为inline元素, 如果单独在View里边,那就是Block。
10.我把View设置了justifyContent: 'center'
,alignItems: 'center'
的样式,并在里面放上了一个ViewPagerAndroid,这个时候如果不给他设置固定的宽度或者使用padding撑开他的话是看不见的,大概是因为被View的style设置压成了类似inline的属性。
11.只有View组件在设置borderRadius
属性过后,才会将自身的border一齐转变成圆角,其他元素比如Image和Touchable类的都不会有任何反应,边角是方的。
12.如果突然出现了,不显示图片的情况,可以给他加一个边框,这样可以确定是没有找到资源还是布局错误,我非常意外的发现只需要设置borderWidth为0就可以让图片显示出来。(改:比较大的图片有时候都不会显示出来,这就很尴尬了)
13.在设置react-native-swiper的点的样式的时候,不能传入函数返回值,需要直接传入一个Element对象,我不知道是哪里出了错:
class Dot extends Component{
render(){
return(
<View style={
{backgroundColor: 'rgba(0,0,0,.2)',
width: 2,
height: 2,
borderRadius: 10,
marginLeft: 3,
marginRight: 3,
marginTop: 3,
marginBottom: 3
}}/>
);
}
}
如果我传入Dot.render()系统会报错,提示我是一个空元素,但是直接传入View就可以成功。
14.RN中元素默认的定位方式是 relative ,并且只有relative 和 absolute 两种定位方式。如果为组件加上 position:absolute ,它将会以inline的方式渲染在页面上。并且脱离正常文档流。也就是视觉上会被后面的组件覆盖,但不能通过zIndex方式调整。嵌套的Text不可用。
15.在给控件写style属性的时候,尽量用一个View包起来,因为有很多控件的style样式无法应用,浪费调试时间。
16.在调试代码的时候,要时刻注意this的指向,比如在下面的例子中,console.log中的this就指向了Drawer,变成了调用他的this了,renderNavigationView`有毒,他会调用传入的函数方法,并且把里面的this指针强行指向自己。
class main extends Component{
navigationView(){
console.log(this);
}
render(){
return( <DrawerLayoutAndroid renderNavigationView={this.navigationView} >
.............
</DrawerLayoutAndroid> );
}
}
17.如果将文字放在图片下方,但是只设置了图片的宽度,可能会导致文字不会紧贴图片下方的问题,如下就会出现此种问题,这个时候设置上height就行了。
<View style={{justifyContent:"center",alignItems:"center"}}>
<Image source={require('')} style={{width:120}} resizeMode="contain"/>
<Text>没有找到你的缓存哟</Text>
</View>
18.hairlineWidth:CallExpression
用来定义当前平台最细的宽度。该属性用来设置边框或者两个组件之间的分割线。javascript{ borderBottomColor: '#bbb', borderBottomWidth: StyleSheet.hairlineWidth}
会根据当前平台信息,自动转换成一根很细的线。
19.推库上这篇文章《React Native 触摸事件处理详解》 关于手势处理的,非常有用!!!!!!!