React-native 布局相关笔记

1. react 宽度基于pt为单位， 可以通过Dimensions 来获取宽高，PixelRatio 获取密度。
2. 基于flex的布局
3. view默认宽度为100%
4. 水平居中用alignItems, 垂直居中用justifyContent
5. 基于flex能够实现现有的网格系统需求，且网格能够各种嵌套无bug
6. 图片布局
7. 通过Image.resizeMode来适配图片布局，包括contain, cover, stretch
8. 默认不设置模式等于cover模式
9. contain模式自适应宽高，给出高度值即可
10. cover铺满容器，但是会做截取
11. stretch铺满容器，拉伸
12. 定位
13. 定位相对于父元素，父元素不用设置position也行
14. padding 设置在Text元素上的时候会存在bug。所有padding变成了marginBottom
15. 文本元素
16. 文字必须放在Text元素里边
17. Text元素可以相互嵌套，且存在样式继承关系
18. numberOfLines 需要放在最外层的Text元素上，且虽然截取了文字但是还是会占用空间

来自 http://segmentfault.com/a/1190000002658374

如何把图片设置为圆形的：通过borderRadius属性，将borderRadius设置为宽度或者高度的一半（一般宽和高的值是一样的，不然就不是正方形的基础图片了）
例如

image: {    height: 100,    borderRadius: 50,    width: 100  }

来自 https://github.com/refinery29/react-native-cheat-sheet

PS:
设置border属性只能在View上，不能在Text上
属性：

        borderLeftWidth: 1 * 2 / scale ,        borderLeftColor: '#000000',         borderRightWidth: 1 * 2 / scale ,        borderRightColor: '#000000',        borderTopWidth: 1 * 2 / scale ,        borderTopColor: '#000000',        borderBottomWidth: 1 * 2 / scale ,        borderBottomColor: '#000000',        borderWidth: 1 ,

其中scale:

let scale = Dimensions.get('window').scale ;

注意：borderWidth必须要有，不然边框属性没用