Есть ли способ создать пространство между двумя элементами без отступов или полей?

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).Если я применю 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,
  },