javascript - 有没有办法在没有填充或边距的情况下在 2 个元素之间创建空间？

Question

我正在使用 React Native，我有 2 个内联按钮，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',
  },

如您所知，React Native 使用 flexbox，而我很难尝试实现我所需要的。问题是，如果我应用边距，它会减少每个按钮末端的按钮宽度。例如:我需要搜索按钮与文本 All Passengers List (9) 完全对齐。如果我应用 marginHorizo​​ntal，它会减小宽度，它会在 2 个按钮的两侧创建边距，这样它就不会再与我提到的文本对齐。

那么，在这种情况下我能做什么呢？

Answer 1

  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

中使用时类似于 width