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，而我在尝试实现所需功能时遇到了困难。关键是，如果我应用margin，它将减小每个按钮末端的按钮宽度。例如：我需要搜索按钮与文本All Passengers List (9)完全对齐。如果我应用marginHorizontal，它将减小宽度，它将在两个按钮的两侧都创建一个边距，因此它将不再与我提到的文本对齐。

那么，在这种情况下我该怎么办？

Answer 1

最简单的解决方法是，保持按钮的宽度并使用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',
  },

Answer 2

  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类似于宽度

Answer 3

最简单的方法是将按钮的宽度设置为略小于一半（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,
  },

有没有一种方法可以在2个元素之间创建空间而无需填充或边距？

3 个答案: