反应原生对齐底部不对齐底部

Question

我正在尝试制作一个底部带有信息框的 mapp 应用程序。我还试图将文本与其容器的底部对齐。它对齐容器而不是文本。但有时显示正确。

Img of what it displays

我的代码是：

import React, { Component } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

const Rectangle = (props) => {
    return <View style={styles.rectangle}>
        <Text style={styles.nameText}>
            Deak Ter
        </Text>
        <Text style={styles.descText} onPress = {props.updateState}>
        {props.myState}
        </Text>
        <Text style={styles.btn}>
            GO
        </Text>
    </View>;
    
  };
  
  const styles = StyleSheet.create({
    rectangle: {
        backgroundColor: 'rgb(220, 220, 220)',
        width: 100 * 2.5,
        height: 100 * 3.5,
        borderRadius: 30,
        paddingTop: 25,
        paddingLeft: 25,
        alignSelf: 'flex-end',
        position: 'absolute', //Here is the trick
        bottom: 0, //Here is the trick
    },
    nameText: {
        fontSize: 30,
        paddingTop: 5,

    },
    descText: {
        paddingTop: 5,

        fontSize: 22
    },
    btn: {        
        backgroundColor: 'rgb(0, 234, 255)',
        width: 100,
        height: 60,
        fontSize: 35,
        textAlign: 'center',
        textAlignVertical: 'center',
        position: 'absolute', //Here is the trick
        bottom: 70,
        left: 20
    }

  });

  export default Rectangle;