React Native - располагайте элементы вертикально, относительно?

Question

Хорошо, я пытаюсь достичь того, что все элементы «выровнены по нижнему краю» и будут двигаться вверх / вниз в зависимости от высоты элемента cardContainer и так далее:

введите описание изображения здесь

Я добился этого с помощью position: absolute и плагина react-native-responsive-screen, но меня беспокоит, что это не масштабируемый / лучший способ добиться этого.

container: { flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: '#fff',
      color: 'white'
    },
      textWrapper: {
        height: hp('70%'), // 70% of height device screen
        width: wp('80%'),   // 80% of width device screen
        justifyContent: 'center',
        alignItems: 'center',
        zIndex: 3, // works on ios
        elevation: 3,
        position: 'absolute'
      },
      //Main containers --------------------
      cardContainer: {
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'blue',
        height: hp('62%'),
        width: wp('100%'),
        padding: 10,
        position: 'absolute',
        bottom: 0
      },
      topTextContainer: {
        color: 'white',
        textAlign: 'center',
        fontSize: hp('4.8%'),
        height: hp('22%'),
        width: wp('100%'),
        position: 'absolute',
        top: hp('20%'),
        justifyContent: 'center',
        alignItems: 'center',
        padding: 20,
        paddingLeft: wp('15%'),
        paddingRight: wp('15%'),
      },
      topBarContainer: {
        color: 'white',
        textAlign: 'center',
        fontFamily: 'SequelSans-BlackDisp',
        height: hp('10%'),
        width: wp('100%'),
        position: 'absolute',
        top: 0,
        opacity: 0.6,
        justifyContent: 'center',
        alignItems: 'center',
      },

  <View style={styles.container}>
            <View style={styles.textWrapper}>
              <Text style={styles.splashTxt}>COLOR</Text>
            </View>
            <View style={styles.topBarContainer}>
                <Text style={styles.topText_Body}>Welcome back, Person</Text>
            </View>
            <View style={styles.topTextContainer}>
                <Text style={styles.topText_Head}>Take the Quiz</Text>
                <Text style={styles.topText_Body}>Take a deep dive into the background some more background text goes here goes here.</Text>
            </View>
            <View style={styles.cardContainer}>

Как можно Я добиваюсь этого позиционирования относительно?

Answer 1

Вы можете использовать свойство flex. Вот отличная запись https://reactnative.dev/docs/flexbox.html

Визуально похоже, что соотношение между вертикальными видами составляет 1: 3: 5.

.textWrapper {
flex: 1;

}
.topBarContainer{
 flex: 3;
}
.topTextContainer{
 flex: 5;
}