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 触摸事件处理详解》 关于手势处理的，非常有用！！！！！！！
网友评论