Отображение строки ниже Параметры TouchableOpacity, обернутые в представление на границе родительского элемента

Question

У меня есть компонент, похожий на меню в React Native, который оборачивается в View. Этот вид имеет 3 варианта. Мне бы хотелось, чтобы у каждого параметра была строка под ним, почти касающаяся границы представления.

Для достижения этого у меня есть три TouchableOpacities с текстом и представлением, все обернутые под одним родителем. Вот как выглядит мой код:

export function Menu () {
  return (
    <View style={{
      flex: 1,
      flexDirection: 'row',
      backgroundColor: 'grey',
      height: 50,
      justifyContent: 'space-around',
      alignContent: 'center',
      alignItems: 'center'
    }}>
      <TouchableOpacity>
        <Text>Option 1</Text>
        <View
          style={{
            width: 50,
            height: 4,
            backgroundColor: 'red',
            paddingTop: 0,
            marginTop: 25,
            marginBottom: 0
          }}
        />
      </TouchableOpacity>
      <TouchableOpacity> <Text>Option 2</Text> </TouchableOpacity>
      <TouchableOpacity> <Text>Option 3</Text> </TouchableOpacity>
    </View>
  )
}

Проблема здесь в том, что, помещая внутренний вид снизу через marginTop: 25, я толкаю свой текст к вершине их родительского элемента, чего я не делаюхотеть. Вот результат этого кода:

Посмотрите, как Вариант 2 и Вариант 3 центрированы в пределах их родителя? Именно так я и хочу, чтобы вариант 1 был, но с красной линией прямо на краю серого прямоугольника, обвивающей все три варианта.

Как этого достичь?

Answer 1

Оберните <Text> внутри <View>. Прошло довольно много времени с тех пор, как я в последний раз работал над RN, но я думаю, что этот код должен дать желаемый результат.

<TouchableOpacity>
  <View style={{flex: 1, alignItems: 'center', height: 46}}><Text>Option 1</Text></View>
  <View
      style={{
        width: 50,
        height: 4,
        backgroundColor: 'red',
        paddingTop: 0,
        marginTop: 25,
        marginBottom: 0
      }}
    />
</TouchableOpacity>

PS: я думаю, что он должен работать даже без height: 46 для <View>но я не могу проверить это сейчас, поэтому не могу заверить.