Как создать горизонтальную линию, разделяющую View на две равные стороны в React Native?

Question

Я работаю над небольшим проектом RN и столкнулся с необходимостью сделать горизонтальную линию посередине внутри элемента View. Я хотел бы создать элемент View, который разделен на две равные половины по горизонтали. Я знаю, что это возможно в HTML && CSS с использованием тегов :: before и :: after в CSS, но как это делается в RN?

Спасибо,

Answer 1

<View style={{flex: 1, flexDirection:'row'}}>
      <View
        style={{
          flex: 0.5,
          backgroundColor: 'red',
          alignself: 'stretch'
        }}
      />
      <View
        style={{
          flex: 0.5,
          backgroundColor: 'blue'
          alignself: 'stretch'
        }}
      />
</View>

Answer 2

Вы можете использовать flexbox (https://reactnative.dev/docs/flexbox):

<View style={{flex: 1}}>
      <View
        style={{
          flex: 0.5,
          borderBottomColor: 'black',
          borderBottomWidth: 1,
        }}
      />
</View>

Внешний вид в этом примере занимает всю высоту, задав для flex значение 1 . Если вы создадите вид внутри этого внешнего вида, который составляет половину размера внешнего вида и зададите ему borderBottomWidth 1, вы создадите горизонтальную линию в середине внешнего вида.

В зависимости от того, как Если вы хотите, чтобы внешний вид был большим, вы можете поэкспериментировать со значениями flex.