如何在不影响Message按钮的前提下增加React Native内容视图高度？

我希望在React Native项目中，让content视图的高度延伸至Message按钮所在位置，且不改动Message按钮的布局。此前尝试增加paddingVertical时，Message按钮被挤至下方甚至不可见，请问该如何实现？

当前效果示意图：

相关代码：

import { StyleSheet, Text, View, Image } from 'react-native'
import React from 'react'
import { formHead } from '../CommonCss/FormCss'


const GetUser = () => {

  const data = [
    {
      username: 'hello',
      image: 'img',
    }
  ]
  return (
    <View style={styles.container}>
      <View style={styles.content}> 
      <Image source={{ uri: data[0].image }} style={styles.userimg} />
      <Text style={styles.namesty}>{data[0].username}</Text>
      </View>
      <Text style={styles.formbtn}>Message</Text>
      <Text style={styles.formbtn2}>Message</Text>
    </View>
  )
}

export default GetUser

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
    backgroundColor: 'black'
  },
  formbtn: {
    width: '80%',
    backgroundColor: 'white',
    borderRadius: 10,
    borderColor: 'white',
    borderWidth: 1,
    fontSize: 25,
    color: 'black',
    textAlign: 'center',
    paddingVertical: 10,
    marginVertical: 10,
    fontWeight: "bold",
    top: '50%',
    marginLeft: 35
  },
  formbtn2: {
    width: '80%',
    backgroundColor: 'white',
    borderRadius: 10,
    borderColor: 'white',
    borderWidth: 1,
    fontSize: 25,
    color: 'black',
    textAlign: 'center',
    paddingVertical: 10,
    marginVertical: 10,
    fontWeight: "bold",
    top: '30%',
    marginLeft: 35
  },
  namesty: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 30,
    margin: 10,
    backgroundColor: '#111111',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 20,
  },
  userimg: {
    width: 150,
    height: 150,
    borderRadius: 75,
  },
  content: {
    backgroundColor: '#111111',
    paddingVertical: 20,
    paddingHorizontal: 20,
    borderRadius: 20,
    width: '100%',
    alignItems: 'center',
  }
})

核心问题是当前按钮使用top属性属于相对定位，仍处于文档流中，content视图的高度变化会挤压按钮位置。要实现需求，需将按钮改为绝对定位脱离文档流，同时让content视图填充到按钮所在区域：

1. 给容器container添加相对定位，作为绝对定位按钮的参考父元素
2. 修改按钮样式为绝对定位，调整位置参数确保布局不变
3. 设置content视图的高度或使用flex布局，让它延伸到按钮所在位置

修改后的完整代码：

import { StyleSheet, Text, View, Image } from 'react-native'
import React from 'react'
import { formHead } from '../CommonCss/FormCss'


const GetUser = () => {

  const data = [
    {
      username: 'hello',
      image: 'img',
    }
  ]
  return (
    <View style={styles.container}>
      <View style={styles.content}> 
        <Image source={{ uri: data[0].image }} style={styles.userimg} />
        <Text style={styles.namesty}>{data[0].username}</Text>
      </View>
      <Text style={styles.formbtn}>Message</Text>
      <Text style={styles.formbtn2}>Message</Text>
    </View>
  )
}

export default GetUser

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
    backgroundColor: 'black',
    position: 'relative' // 添加相对定位
  },
  formbtn: {
    width: '80%',
    backgroundColor: 'white',
    borderRadius: 10,
    borderColor: 'white',
    borderWidth: 1,
    fontSize: 25,
    color: 'black',
    textAlign: 'center',
    paddingVertical: 10,
    fontWeight: "bold",
    position: 'absolute', // 改为绝对定位
    top: '70%', // 调整top值匹配原布局位置
    left: '10%' // 用left替代marginLeft，适配不同屏幕
  },
  formbtn2: {
    width: '80%',
    backgroundColor: 'white',
    borderRadius: 10,
    borderColor: 'white',
    borderWidth: 1,
    fontSize: 25,
    color: 'black',
    textAlign: 'center',
    paddingVertical: 10,
    fontWeight: "bold",
    position: 'absolute', // 改为绝对定位
    top: '50%', // 调整top值匹配原布局位置
    left: '10%' // 用left替代marginLeft，适配不同屏幕
  },
  namesty: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 30,
    margin: 10,
    backgroundColor: '#111111',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 20,
  },
  userimg: {
    width: 150,
    height: 150,
    borderRadius: 75,
  },
  content: {
    backgroundColor: '#111111',
    paddingVertical: 20,
    paddingHorizontal: 20,
    borderRadius: 20,
    width: '100%',
    alignItems: 'center',
    flex: 1, // 让content填充容器除绝对定位元素外的全部空间
  }
})

• 按钮改为绝对定位后，不再受文档流影响，content视图的高度变化不会挤压按钮位置
• 用left: '10%'替代marginLeft:35，能更好适配不同宽度的设备屏幕
• content设置flex:1后，会自动填充容器内除绝对定位按钮外的所有空间，实现高度延伸至按钮所在区域的效果

内容的提问来源于stack exchange，提问作者user20731273