代码之家 › 专栏 › 技术社区 › Non

有没有一种方法可以在两个元素之间创建空间而不使用填充或边距?

react-native css3 reactjs css javascript

Non · 技术社区 · 5 年前

我使用的是React Native,我有两个内联按钮 search 和 add 按钮:

这就是我使用JSX的方式:

    <View style={globalStyles.stretchContent}>
      <TouchableOpacity
        style={[
          globalStyles.touchableBtnDropOffItem,
          { backgroundColor: Colors.dropOffTabColor },
        ]}
      >
        <Text style={{ color: '#fff' }}>Search</Text>
      </TouchableOpacity>

      <TouchableOpacity
        style={[
          globalStyles.touchableBtnDropOffItem,
          { backgroundColor: Colors.dropOffTabColor },
        ]}
      >
        <Text style={{ color: '#fff' }}>Add</Text>
      </TouchableOpacity>
    </View>

以及样式表:

  touchableBtnDropOffItem: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    alignContent: 'space-between',
    height: 36,
    marginTop: 20,
    borderRadius: 2,
    marginHorizontal: 5,
  },
  stretchContent: {
    flex: 1,
    color: white,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },

All Passengers List (9) . 如果我申请 marginHorizontal

那么,在这种情况下我能做什么呢?

2 回复 | 直到 5 年前

fila90 5 年前

  touchableBtnDropOffItem: {
    alignItems: 'center',
    justifyContent: 'center',
    alignContent: 'space-between',
    height: 36,
    marginTop: 20,
    borderRadius: 2,
    flexBasis: 45%,
  },
  stretchContent: {
    flex: 1,
    color: white,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },

添加 flexBasis: 45% justifyContent: 'space-between' 致 stretchContent flexBasis 在里面用的时候宽度差不多 flexbox

Subhendu Kundu 5 年前

最简单的解决方法是,保持按钮的宽度并使用 justifyContent: 'space-around' 如果要在按钮的左边或右边之间留出空间,也可以使用 justifyContent: 'space-between'

以你为例,

touchableBtnDropOffItem: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    alignContent: 'space-between',
    height: 36,
    marginTop: 20,
    borderRadius: 2,
    marginHorizontal: 5,
    width: '40%'
  },
  stretchContent: {
    flex: 1,
    color: white,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },

Jack Bashford 5 年前

45% 或 40% ),然后浮动每个按钮(浮动 Search 向左,然后 Add

(我认为下面的语法是正确的-如果它不是有效的React代码,请告诉我如何修复它)。

<View style={globalStyles.stretchContent}>
  <TouchableOpacity
    style={[
      globalStyles.touchableBtnDropOffItem,
      { backgroundColor: Colors.dropOffTabColor; float: left; },
    ]}
  >
    <Text style={{ color: '#fff' }}>Search</Text>
  </TouchableOpacity>

  <TouchableOpacity
    style={[
      globalStyles.touchableBtnDropOffItem,
      { backgroundColor: Colors.dropOffTabColor; float: right; },
    ]}
  >
    <Text style={{ color: '#fff' }}>Add</Text>
  </TouchableOpacity>
</View>

在样式表中:

  touchableBtnDropOffItem: {
    width: 45%,
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    alignContent: 'space-between',
    height: 36,
    marginTop: 20,
    borderRadius: 2,
    marginHorizontal: 5,
  },