宽度单位和像素密度
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>
<span class="hljs-tag"><<span class="hljs-title">View <span class="hljs-attribute">style=<span class="hljs-value">{{height: <span class="hljs-attribute">100, <span class="hljs-attribute">backgroundColor: '#<span class="hljs-attribute">333333', <span class="hljs-attribute">alignItems: '<span class="hljs-attribute">center'}}>
<span class="hljs-tag"><<span class="hljs-title">View <span class="hljs-attribute">style=<span class="hljs-value">{{backgroundColor: '#<span class="hljs-attribute">fefefe', <span class="hljs-attribute">width: <span class="hljs-attribute">30, <span class="hljs-attribute">height: <span class="hljs-attribute">30, <span class="hljs-attribute">borderRadius: <span class="hljs-attribute">15}}/>
<span class="hljs-tag"></<span class="hljs-title">View>
<span class="hljs-tag"><<span class="hljs-title">Text <span class="hljs-attribute">style=<span class="hljs-value">{[styles.text, <span class="hljs-attribute">styles.header]}>
垂直居中
<span class="hljs-tag"></<span class="hljs-title">Text>
<span class="hljs-tag"><<span class="hljs-title">View <span class="hljs-attribute">style=<span class="hljs-value">{{height: <span class="hljs-attribute">100, <span class="hljs-attribute">backgroundColor: '#<span class="hljs-attribute">333333', <span class="hljs-attribute">justifyContent: '<span class="hljs-attribute">center'}}>
<span class="hljs-tag"><<span class="hljs-title">View <span class="hljs-attribute">style=<span class="hljs-value">{{backgroundColor: '#<span class="hljs-attribute">fefefe', <span class="hljs-attribute">width: <span class="hljs-attribute">30, <span class="hljs-attribute">height: <span class="hljs-attribute">30, <span class="hljs-attribute">borderRadius: <span class="hljs-attribute">15}}/>
<span class="hljs-tag"></<span class="hljs-title">View>
<span class="hljs-tag"><<span class="hljs-title">Text <span class="hljs-attribute">style=<span class="hljs-value">{[styles.text, <span class="hljs-attribute">styles.header]}>
水平垂直居中
<span class="hljs-tag"></<span class="hljs-title">Text>
<span class="hljs-tag"><<span class="hljs-title">View <span class="hljs-attribute">style=<span class="hljs-value">{{height: <span class="hljs-attribute">100, <span class="hljs-attribute">backgroundColor: '#<span class="hljs-attribute">333333', <span class="hljs-attribute">alignItems: '<span class="hljs-attribute">center', <span class="hljs-attribute">justifyContent: '<span class="hljs-attribute">center'}}>
<span class="hljs-tag"><<span class="hljs-title">View <span class="hljs-attribute">style=<span class="hljs-value">{{backgroundColor: '#<span class="hljs-attribute">fefefe', <span class="hljs-attribute">width: <span class="hljs-attribute">30, <span class="hljs-attribute">height: <span class="hljs-attribute">30, <span class="hljs-attribute">borderRadius: <span class="hljs-attribute">15}}/>
<span class="hljs-tag"></<span class="hljs-title">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
},
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
左边固定, 右边固定,中间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'
}
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
嵌套的网格
通常网格不是一层的,布局容器都是一层套一层的, 所以必须验证在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"}}> </View> </View> </View> <Text style={[styles.text, styles.header, {color: '#ffffff', fontSize: 12}]}> {(function(){ var str = ''; var n = 100; while(n--) { str += '嵌套的网格' + '\n'; } return str; })()} </Text> </ScrollView> </View> </