[深入剖析React Native]React Native Flexbox属性讲解
2016-09-08 11:37
1006 查看
React Native通过一个基于Flexbox的布局引擎,在所有移动平台上实现了一致的跨平台样式和布局方案。
flexDirection
alignSelf
alignItems
justifyContent
flexWrap
效果图:
上面代码仅仅修改了container样式:
效果图:
flex-start:与父容器首部对齐
flex-end:flex-end:与父容器尾部对齐
center:位于垂直位置
auto:按照自身设置的宽高来显示,如果没设置,效果跟streth一样
stretch:垂直拉伸
- flex-start:与父组件在垂直方向上的首部对齐
- flex-end:与父组件在垂直方向上的尾部对齐
- center:处于父容器在垂直方向上的中间位置
- stretch:在垂直方向上填充整个容器
flex-start:伸缩项目与父容器起始端靠齐
flex-end:与父容器结尾端靠齐
center:水平居中
space-between:第一个子组件位于父容器起始端,最后一个子组件位于父容器结尾端。然后平均分配在父容器水平方向上
space-around:所有子组件平均分配在父容器的相应方向上,子组件两端都有留空隙
nowrap:即使空间不够也不换行,放不下的会冲出溢出屏幕
wrap:空间不够的话自动换行
转载请标注地址:Geek马走日
Follow个人Github : mazouri
主要属性
flexflexDirection
alignSelf
alignItems
justifyContent
flexWrap
属性讲解
flex
当一个元素定义了flex属性时,表示该元素是可伸缩的(flex的属性值大于0的时候才可伸缩),可以把它类比成android中的weight属性。class FlexboxReact extends Component { render() { return ( <View style={styles.container}> <View style={styles.flex_style_1}><Text>占1/6</Text></View> <View style={styles.flex_style_2}><Text>占1/3</Text></View> <View style={styles.flex_style_3}><Text>占1/2</Text></View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, }, flex_style_1: { flex: 1, backgroundColor: 'red' }, flex_style_2: { flex: 2, backgroundColor: 'white' }, flex_style_3: { flex: 3, backgroundColor: 'blue' }, });
效果图:
flexDirection
flexDirection在React Native中只有两个属性值,row(横向伸缩)和column(纵向伸缩),默认为column:class FlexboxReact extends Component { render() { return ( <View style={styles.container}> <View style={styles.flex_style_1}><Text>占1/6</Text></View> <View style={styles.flex_style_2}><Text>占1/3</Text></View> <View style={styles.flex_style_3}><Text>占1/2</Text></View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'row', }, flex_style_1: { flex: 1, backgroundColor: 'red' }, flex_style_2: { flex: 2, backgroundColor: 'white' }, flex_style_3: { flex: 3, backgroundColor: 'blue' }, });
上面代码仅仅修改了container样式:
container: { flex: 1, flexDirection: 'row', },
效果图:
alignSelf
这个用法跟alignItems的很像,只是它用于单个组件alignSelf的对齐方式, 即该属性用来设置单独组件的竖直对齐方式,主要有四种:flex-start、flex-end、center、auto、stretch:flex-start:与父容器首部对齐
flex-end:flex-end:与父容器尾部对齐
center:位于垂直位置
auto:按照自身设置的宽高来显示,如果没设置,效果跟streth一样
stretch:垂直拉伸
class FlexboxReact extends Component { render() { return ( <View style={styles.container}> <View style={[styles.view, styles.alignSelf_flexstart]}><Text>flex-start</Text></View> <View style={[styles.view, styles.alignSelf_flexend]}><Text>flex-end</Text></View> <View style={[styles.view, styles.alignSelf_center]}><Text>center</Text></View> <View style={[styles.view, styles.alignSelf_auto]}><Text>auto</Text></View> <View style={[styles.view, styles.alignSelf_stretch]}><Text>stretch</Text></View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, }, view: { flex: 1, backgroundColor: 'red', borderWidth: 1, borderColor: 'blue', }, alignSelf_flexstart: { alignSelf: 'flex-start', }, alignSelf_flexend: { alignSelf: 'flex-end', }, alignSelf_center: { alignSelf: 'center', }, alignSelf_auto: { alignSelf: 'auto', }, alignSelf_stretch: { alignSelf: 'stretch', }, });
alignItems
用于定义子组件在垂直方向上的对齐方式。有四个属性可设置:flex-start,flex-end,center,stretch。- flex-start:与父组件在垂直方向上的首部对齐
- flex-end:与父组件在垂直方向上的尾部对齐
- center:处于父容器在垂直方向上的中间位置
- stretch:在垂直方向上填充整个容器
class FlexboxReact extends Component { render() { return ( <View style={styles.container}> <View style={[styles.view, styles.alignItems_flexstart]}> <Text style={styles.subView}>flex-start</Text> </View> <View style={[styles.view, styles.alignItems_flexend]}> <Text style={styles.subView}>flex-end</Text> </View> <View style={[styles.view, styles.alignItems_center]}> <Text style={styles.subView}>center</Text> </View> <View style={[styles.view, styles.alignItems_stretch]}> <Text style={styles.subView}>stretch</Text> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, }, view: { flex: 1, }, subView: { width: 100, height: 100, backgroundColor: 'red', borderWidth: 1, borderColor: 'blue', }, alignItems_flexstart: { alignItems: 'flex-start', }, alignItems_flexend: { alignItems: 'flex-end', }, alignItems_center: { alignItems: 'center', }, alignItems_stretch: { alignItems: 'stretch', }, });
justifyContent
justifyContent和alignItems是相对的。它有五个属性可以设置,分别是flex-start,flex-end,center,space-between,space-around。flex-start:伸缩项目与父容器起始端靠齐
flex-end:与父容器结尾端靠齐
center:水平居中
space-between:第一个子组件位于父容器起始端,最后一个子组件位于父容器结尾端。然后平均分配在父容器水平方向上
space-around:所有子组件平均分配在父容器的相应方向上,子组件两端都有留空隙
class FlexboxReact extends Component { render() { return ( <View style={styles.container}> <View style={[styles.view, styles.justifyContent_flexstart]}> <Text style={styles.subView}>Item 1</Text> <Text style={styles.subView}>Item 2</Text> <Text style={styles.subView}>Item 3</Text> </View> <View style={[styles.view, styles.justifyContent_flexend]}> <Text style={styles.subView}>Item 1</Text> <Text style={styles.subView}>Item 2</Text> <Text style={styles.subView}>Item 3</Text> </View> <View style={[styles.view, styles.justifyContent_center]}> <Text style={styles.subView}>Item 1</Text> <Text style={styles.subView}>Item 2</Text> <Text style={styles.subView}>Item 3</Text> </View> <View style={[styles.view, styles.justifyContent_between]}> <Text style={styles.subView}>Item 1</Text> <Text style={styles.subView}>Item 2</Text> <Text style={styles.subView}>Item 3</Text> </View> <View style={[styles.view, styles.justifyContent_around]}> <Text style={styles.subView}>Item 1</Text> <Text style={styles.subView}>Item 2</Text> <Text style={styles.subView}>Item 3</Text> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'row', }, view: { flex: 1, borderWidth: 1, borderColor: 'black', }, subView: { width: 50, height: 50, backgroundColor: 'red', borderWidth: 1, borderColor: 'blue', }, justifyContent_flexstart: { justifyContent: 'flex-start', }, justifyContent_flexend: { justifyContent: 'flex-end', }, justifyContent_center: { justifyContent: 'center', }, justifyContent_between: { justifyContent: 'space-between', }, justifyContent_around: { justifyContent: 'space-around', }, });
flexWrap
flexWrap用于设置是否可换行,有两个属性可设置nowrap和wrap。nowrap:即使空间不够也不换行,放不下的会冲出溢出屏幕
wrap:空间不够的话自动换行
class FlexboxReact extends Component { render() { return ( <View style={styles.container}> <View style={[styles.view, styles.flexWrap_nowrap]}> <Text style={styles.subView}>Item 1</Text> <Text style={styles.subView}>Item 2</Text> <Text style={styles.subView}>Item 3</Text> <Text style={styles.subView}>Item 4</Text> <Text style={styles.subView}>Item 5</Text> <Text style={styles.subView}>Item 6</Text> </View> <View style={[styles.view, styles.flexWrap_wrap]}> <Text style={styles.subView}>Item 1</Text> <Text style={styles.subView}>Item 2</Text> <Text style={styles.subView}>Item 3</Text> <Text style={styles.subView}>Item 4</Text> <Text style={styles.subView}>Item 5</Text> <Text style={styles.subView}>Item 6</Text> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, }, view: { flex: 1, flexDirection: 'row', borderWidth: 1, borderColor: 'black', }, subView: { width: 80, height: 80, backgroundColor: 'red', borderWidth: 1, borderColor: 'blue', }, flexWrap_nowrap: { flexWrap: 'nowrap', }, flexWrap_wrap: { flexWrap: 'wrap', }, });
转载请标注地址:Geek马走日
Follow个人Github : mazouri
相关文章推荐
- [深入剖析React Native]热更新之react-native-pushy使用指南(IOS)
- [深入剖析React Native]React Native组件之Navigator
- React Native从零开始(二)Flexbox布局,和布局属性
- [深入剖析React Native]React Native组件之Touchable*源码解析(1)
- 基础篇章:React Native之Flexbox的讲解(Height and Width)
- [深入剖析React Native]React Native组件之Touchable*
- React Native-4.React Native布局属性练习之flexBox模型实战
- [深入剖析React Native]热更新之react-native-pushy使用指南(Android)
- [深入剖析React Native]手势响应讲解
- [深入剖析React Native]React 初探
- IOS React Native FlexBox详解及实例
- React Native 弹性布局FlexBox
- React Native FlexBox布局
- React Native系列之flexbox布局(伸缩属性)
- React Native系列之flexbox布局详解
- React Native 弹性布局FlexBox
- React Native FlexBox布局
- ReactNative之Flexbox布局
- React-Native之flexbox布局
- React Native Flexbox布局