react-native布局

参考链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/react-native%E5%B8%83%E5%B1%80/

一、宽度和像素密度：

（1）首先你我们需要了解iPhone的各个尺寸：iphone 4s 3.5Screen、iphone 5 4Screen、iphone 6 4.7Screen、iphone 6 Plus 5.5 Screen

这个刚开始的时候对布局规划不是很好，没有考虑到兼容什么的，导致到最后浪费了好些时间(一般初学者都会忽略这些屏幕适配的问题)。

具体：var DimenSions=require('Dimensions');

var windowSize=Dimensions.get('window')

<View style={{width:windowSize.width,height:windowSize.height}}>

<Text>....</Text>

</View>

二、Flex的简单布局

（1）flex布局定义？

flex布局是flexible box 的缩写，意为"弹性布局",用来为盒状模型提供最大的灵活性。

（2）适用条件:任何一个容器都可以指定为flex布局(比如你要做一个表格,那么就需要均等分配,这个时候你就可以使用flex布局)。

View style={styles.border1}> 

三、水平与垂直居中(alignItems、justifyContent)

<Text style={[styles.text,styles.header]}>

水平居中

</Text>

<View style={{height: 100,backgroundColor: '#333333',alignItems: 'center'}}>

<View style={{backgroundColor: '#fefefe',width: 30,height: 30,borderRadius: 15}}/>

</View>

<Text style={[styles.text,255);"> 垂直居中

</Text>

</View>

<Text style={[styles.text,255);"> 水平垂直居中

四、图片布局:

五、padding和margin

padding的语法结构:padding:10,paddingLeft,paddingTop

margin的语法跟Padding一样；marginLeft:10,marginRight:10,marginTop

我们很多时候都在纠结于到底是用margin还是Padding,这两者之间有有什么区别：

1.padding 是属性定义的元素边框与元素之间的控件(指的是内边距)

2.margin指的是外边距

example:

(1)分别在文本上设置margin:10和padding:10:

(2)分别在View上设置margin:10和padding:10

<Viewstyle={styles.container}>

<Viewstyle={{padding:10,width:100,borderWidth:1}}>

<Text style={{borderColor:'red',borderWidth:1}}>设置Padding:10</Text>

</View>

<Viewstyle={{margin:10,borderWidth:1}}>

>设置margin:10</Text>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!