美文网首页
ReactNative flex 布局

ReactNative flex 布局

作者: 梁同桌 | 来源:发表于2017-10-23 09:55 被阅读51次

react-native 就下面四种 flex 属性控制布局

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
  },
  item: {
    backgroundColor: '#4385f5',
    color: 'white',
    textAlign: 'center',
    fontSize: 50,
    lineHeight: 100,
    width: 100,
    height: 100,
    margin: 5,
  },
  //flexDirection(主轴)
  //column(默认 从上向下)| column-reverse |  row | row-reverse 
  box_flexDirection: {
    flexDirection: 'column'
  },
  //justifyContent(描述子盒子之间的距离)
  //flex-start(默认 从右边开始)| flex-end | center | space-between(两端靠边,项目之间间距相等)| space-around(每个项目两侧的间隔相等)
  //需要 item 宽高调整小一些,才可以看见效果
  box_justifyContent: {
    justifyContent: 'flex-start',
    flexDirection: 'row',    
  },
  //flexWrap (描述一行排满是否换行) 
  //nowrap(默认 不换行)| wrap 
  box_flexWrap: {
    flexWrap: 'wrap',
    flexDirection: 'row',
  },
  //alignItems(用于描述交叉轴(又名 侧轴))
  //flex-start(默认)| flex-end | center | baseline(第一行字体对齐)| stretch(侧轴方向撑满)
  box_alignItems: {
    alignItems: 'flex-start'
  },
});

GitHub: https://github.com/liangtongzhuo/react_native_flex

相关文章

  • ReactNative UI布局之flex

    ReactNative UI布局之flex flexDirection:决定flex的布局方向 justifyCo...

  • ReactNative之Flex布局

    一般使用ReactNative开发App,一般都采用Flex布局,使用这套布局就非常快。Flex简介Flex又叫弹...

  • ReactNative Flex 布局

    起源 2009年,W3C 提出了一种新的方案----Flex 布局,Flex 是 Flexible Box 的缩写...

  • ReactNative flex 布局

    react-native 就下面四种 flex 属性控制布局 GitHub: https://github.com...

  • ReactNative Flex布局

    Flex 布局1.flexDirection (主轴方向)在组件的style中指定flexDirection可以决...

  • ReactNative笔记-flexbox和position

    ReactNative笔记-flexbox和position 在rn中布局基本上全部是使用的flex,所以flex...

  • ReactNative之Flex布局

    一:什么是FlexBox布局? 弹性盒模型(The Flexible Box Module),又叫Flexbox,...

  • ReactNative之Flex布局(三)

    前言 眼看很多公司都开始尝试使用ReactNative,达到跨平台开发,最近也写了很多文章,希望让更多想了解的同学...

  • flex布局

    认识flex布局 flex布局(Flexible 布局,弹性布局)开启了flex布局的元素叫flex contai...

  • 初见FLEX

    FLEX布局 一种新的布局方式,flex布局 flex布局与方向无关 flex布局可以实现空间自动分配、自动对齐。...

网友评论

      本文标题:ReactNative flex 布局

      本文链接:https://www.haomeiwen.com/subject/tupouxtx.html