react-native 布局基础
Posted axl234
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react-native 布局基础相关的知识，希望对你有一定的参考价值。
宽度单位和像素密度
react的宽度不支持百分比，设置宽度时不需要带单位 {width: 10}， 那么10代表的具体宽度是多少呢？
不知道是官网文档不全还是我眼瞎，反正是没找到，那做一个实验自己找吧：
var Dimensions = require(‘Dimensions‘);
<Text style={styles.welcome}>
window.width={Dimensions.get(‘window‘).width + ‘\n‘}
window.height={Dimensions.get(‘window‘).height + ‘\n‘}
pxielRatio={PixelRatio.get()}
</Text> 默认用的是ihone6的模拟器结果是：
window.width=375
window.height=667我们知道iphone系列的尺寸如下图：
可以看到iphone 6的宽度为 375pt，对应了上边的375，实际上官文指出的单位为 dp 。 那如何获取实际的像素尺寸呢？ 这对图片的高清化很重要，如果我的图片大小为100100 px. 设置宽度为100 100. 那在iphone上的尺寸就是模糊的。 这个时候需要的图像大小应该是 100 * pixelRatio的大小 。
react 提供了PixelRatio 的获取方式https://facebook.github.io/react-native/docs/pixelratio.html
var image = getImage({
width: 200 * PixelRatio.get(),
height: 100 * PixelRatio.get()
});
<Image source={image} style={{width: 200, height: 100}} />flex的布局
默认宽度
我们知道一个div如果不设置宽度，默认的会占用100%的宽度， 为了验证100%这个问题， 做三个实验
-
根节点上方一个View， 不设置宽度
-
固定宽度的元素上设置一个View， 不设置宽度
-
flex的元素上放一个View宽度， 不设置宽度
<Text style={[styles.text, styles.header]}>
根节点上放一个元素，不设置宽度
</Text>
<View style={{height: 20, backgroundColor: ‘#333333‘}} />
<Text style={[styles.text, styles.header]}>
固定宽度的元素上放一个View，不设置宽度
</Text>
<View style={{width: 100}}>
<View style={{height: 20, backgroundColor: ‘#333333‘}} />
</View>
<Text style={[styles.text, styles.header]}>
flex的元素上放一个View，不设置宽度
</Text>
<View style={{flexDirection: ‘row‘}}>
<View style={{flex: 1}}>
<View style={{height: 20, backgroundColor: ‘#333333‘}} />
</View>
<View style={{flex: 1}}/>
</View>
结果可以看到flex的元素如果不设置宽度， 都会百分之百的占满父容器。
水平垂直居中
css 里边经常会做的事情是去讲一个文本或者图片水平垂直居中，如果使用过css 的flexbox当然知道使用alignItems 和 justifyContent . 那用react-native也来做一下实验
<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, styles.header]}>
垂直居中
</Text>
<View style={{height: 100, backgroundColor: ‘#333333‘, justifyContent: ‘center‘}}>
<View style={{backgroundColor: ‘#fefefe‘, width: 30, height: 30, borderRadius: 15}}/>
</View>
<Text style={[styles.text, styles.header]}>
水平垂直居中
</Text>
<View style={{height: 100, backgroundColor: ‘#333333‘, alignItems: ‘center‘, justifyContent: ‘center‘}}>
<View style={{backgroundColor: ‘#fefefe‘, width: 30, height: 30, borderRadius: 15}}/>
</View>
网格布局
网格布局实验， 网格布局能够满足绝大多数的日常开发需求，所以只要满足网格布局的spec，那么就可以证明react的flex布局能够满足正常开发需求
等分的网格
<View style={styles.flexContainer}>
<View style={styles.cell}>
<Text style={styles.welcome}>
cell1
</Text>
</View>
<View style={styles.cell}>
<Text style={styles.welcome}>
cell2
</Text>
</View>
<View style={styles.cell}>
<Text style={styles.welcome}>
cell3
</Text>
</View>
</View>
styles = {
flexContainer: {
// 容器需要添加direction才能变成让子元素flex
flexDirection: ‘row‘
},
cell: {
flex: 1,
height: 50,
backgroundColor: ‘#aaaaaa‘
},
welcome: {
fontSize: 20,
textAlign: ‘center‘,
margin: 10
},
}左边固定， 右边固定，中间flex的布局
<View style={styles.flexContainer}>
<View style={styles.cellfixed}>
<Text style={styles.welcome}>
fixed
</Text>
</View>
<View style={styles.cell}>
<Text style={styles.welcome}>
flex
</Text>
</View>
<View style={styles.cellfixed}>
<Text style={styles.welcome}>
fixed
</Text>
</View>
</View>
styles = {
flexContainer: {
// 容器需要添加direction才能变成让子元素flex
flexDirection: ‘row‘
},
cell: {
flex: 1,
height: 50,
backgroundColor: ‘#aaaaaa‘
},
welcome: {
fontSize: 20,
textAlign: ‘center‘,
margin: 10
},
cellfixed: {
height: 50,
width: 80,
backgroundColor: ‘#fefefe‘
}
}嵌套的网格
通常网格不是一层的，布局容器都是一层套一层的， 所以必须验证在real world下面的网格布局
<Text style={[styles.text, styles.header]}>
嵌套的网格
</Text>
<View style={{flexDirection: ‘row‘, height: 200, backgroundColor:"#fefefe", padding: 20}}>
<View style={{flex: 1, flexDirection:‘column‘, padding: 15, backgroundColor:"#eeeeee"}}>
<View style={{flex: 1, backgroundColor:"#bbaaaa"}}>
</View>
<View style={{flex: 1, backgroundColor:"#aabbaa"}}>
</View>
</View>
<View style={{flex: 1, padding: 15, flexDirection:‘row‘, backgroundColor:"#eeeeee"}}>
<View style={{flex: 1, backgroundColor:"#aaaabb"}}>
<View style={{flex: 1, flexDirection:‘row‘, backgroundColor:"#eeaaaa"}}>
<View style={{flex: 1, backgroundColor:"#eebbaa"}}>
</View>
<View style={{flex: 1, backgroundColor:"#bbccee"}}>
</View>
</View>
<View style={{flex: 1, backgroundColor:"#eebbdd"}}>
</View>
</View>
<View style={{flex: 1, backgroundColor:"#aaccaa"}}>
<ScrollView style={{flex: 1, backgroundColor:"#bbccdd", padding: 5}}>
<View style={{flexDirection: ‘row‘, height: 50, backgroundColor:"#fefefe"}}>
<View style={{flex: 1, flexDirection:‘column‘, backgroundColor:"#eeeeee"}}>
<View style={{flex: 1, backgroundColor:"#bbaaaa"}}>
</View>
<View style={{flex: 1, backgroundColor:"#aabbaa"}}>
</View>
</View>
<View style={{flex: 1, flexDirection:‘row‘, backgroundColor:"#eeeeee"}}>
<View style={{flex: 1, backgroundColor:"#aaaabb"}}>
<View style={{flex: 1, flexDirection:‘row‘, backgroundColor:"#eeaaaa"}}>
<View style={{flex: 1, backgroundColor:"#eebbaa"}}>
</View>
<View style={{flex: 1, backgroundColor:"#bbccee"}}>
</View>
</View>
<View style={{flex: 1, backgroundColor:"#eebbdd"}}>
</View>
</View>
<View style={{flex: 1, backgroundColor:"#aaccaa"}}>