Как наделить нижний вид фона?

Question

Я хочу немного порезать цвет фона, чтобы текст был наполовину с ним.

Я пытаюсь использовать marginBottom, но позиция текста будет двигаться вместе с ней.

return (
  <View style={{ flex: 1, backgroundColor: 'pink' }>
    <View style={{ felx: 1, backgroundColor: 'blue', marginBottom: 40, justifyContent: 'flex-end' }}>
      <Text style={{ fontSize: 86, color: 'white' }}>Half</Text>
    </View>
  </View>
);

Может ли любой простой способ достичь этого?

Спасибо.

Answer 1

Моя идея немного другая. Попробуйте вставить другой вид и дать position: 'absolute' этому виду, как показано ниже:

<View style={{ flex: 1, backgroundColor: 'pink' }}>
    <View style={{ flex: 1, backgroundColor: 'blue', marginBottom: 40, justifyContent: 'flex-end' }}>
        <View style={{ bottom: -43, position: 'absolute' }}>
            <Text style={{ fontSize: 86, color: 'white' }}>Half</Text>
        </View>
    </View>
</View>

Когда вы присваиваете значение bottom, убедитесь, что вы указали половину размера шрифта.

Надежда это помогает тебе Не стесняйтесь сомнений.