Flex 和布局 (React Native)

尼拉

我想用固定大小在它们之间隔开项目,但我尝试使用 Flex 的选项似乎不起作用。

我尝试了这两个选项:

1.

alarmContainer: {
    flex: 0,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    borderWidth: 1,
    borderColor:'black',
    margin: 5
  },
  alarmText: {
    fontSize: 17,
    margin: 5
  },
  alarmBtnDelete: {
    margin: 5
  },
  alarmBtnEdit: {
    margin: 5
  }

2.

alarmContainer: {
    flex: 0,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: 1,
    borderColor:'black',
    margin: 5
  },
  alarmText: {
    fontSize: 17,
    margin: 5
  },
  alarmBtnDelete: {
    margin: 5
  },
  alarmBtnEdit: {
    margin: 5
  }

我用选项 1 得到的结果是这样的:在此处输入图片说明我用选项 2 得到的结果是这样的:在此处输入图片说明

我希望它像选项 1 一样,只是在项目之间有一点余量。我在每个项目中添加了边距和填充,但似乎不起作用,它们不会传播。

尼拉

@dillon.harless 找到了解决方案:

alarmContainer: {
    flex: 0,
    flexDirection: 'row', // main axis
    justifyContent: 'space-around', // main axis
    alignItems: 'center', // cross axis
    borderWidth: 1,
    borderColor:'black',
    margin: 5,
    paddingLeft: '30%',
    paddingRight: '30%'
  }

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

React Native和require('http')

来自分类Dev

React Native: Setting flex:1 on a ScrollView contentContainerStyle causes overlapping of components

来自分类Dev

Flex React Native-当内容到达边缘时如何使用flex中断内容

来自分类Dev

React Native和{flex:1}

来自分类Dev

React Native对反向Flex方向的支持

来自分类Dev

React Native和Firebase 3

来自分类Dev

结合React和React-Native

来自分类Dev

使用react-native中的flex使项目坚持到底

来自分类Dev

{flex:1}在React Native中无法正常工作

来自分类Dev

容器内的多行-Flex-React-Native

来自分类Dev

React-Native应用程序和阿拉伯电话设置布局被破坏

来自分类Dev

flex在react-native中的ScrollView中不起作用

来自分类Dev

React Native如何在Flex方向行内使用<br>

来自分类Dev

React Native中的多列和行Flex Box问题

来自分类Dev

React Native中的布局设计

来自分类Dev

android native和react native之间的通信

来自分类Dev

React Native中的Flexbox'flex'属性

来自分类Dev

Flex WebView在React Native中

来自分类Dev

流星和React Native

来自分类Dev

React Native 中基于 Api 的布局

来自分类Dev

React Native:从数组中的数据构建布局

来自分类Dev

React Native 中的布局安排

来自分类Dev

React Native 的自定义标题布局

来自分类Dev

在 React 和 React Native 中使用模型

来自分类Dev

FlatList 的 React-Native 布局格式

来自分类Dev

调整布局 React Native

来自分类Dev

React Native,Flex Box 有问题

来自分类Dev

React Native - android 和 iOS?

来自分类Dev

Promises 和 React Native 协助