ReactNative flex 布局

最新推荐文章于 2024-07-04 21:26:38 发布

weixin_33682790

最新推荐文章于 2024-07-04 21:26:38 发布

阅读量77

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a31f1906fb9a0450c496be6

本文详细介绍了React Native中Flex布局的四个核心属性：flexDirection、justifyContent、flexWrap及alignItems，并通过具体样式展示了这些属性如何影响组件布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

转载于:https://juejin.im/post/5a31f1906fb9a0450c496be6