React Native中已定义Height仍自动调整问题求助

我是React Native新手，以下是我的实现代码：

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
import { MainLogo } from '../../logos/mainLogo';
import { TextInput } from "react-native";

export function Home() {
  return (
    <SafeAreaView>
      <View style={styles.firstBackGround}>
        <MainLogo/>
        <Text style={{fontSize:25,fontWeight:'bold',color:'rgb(108, 150, 232)'}}>LIBRARY</Text>
      </View>
      <TextInput placeholder='Search Song or Artist' style={styles.secondBackGround} placeholderTextColor="#6b7eb1" ></TextInput>
      <Text style={styles.recommendedText}>Recommended</Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create(
  {
    container: {},
    firstBackGround: {
      flexDirection:'row',
      alignItems:'center',
      flex:0,
    },
    secondBackGround:{
      backgroundColor: '#3f4d7e',
      width:'83%',
      marginTop:10,
      height:'17%',
      borderRadius:20,
      flex:0,
      marginLeft:'auto',
      marginRight:'auto',
      paddingLeft: 20,
    },
    recommendedText:{
      fontSize:17,
      flex:0,
      flexDirection:'row',
      fontWeight:'bold',
      color:'rgb(108, 150, 232)',
      marginLeft:20,
      marginTop:100,
    }
  });

问题：当增大Recommended文本的marginTop属性值时，TextInput组件的height会自动改变。此前解决了第一个View与TextInput间的类似问题，但现在无法解决TextInput与Recommended文本间的该问题。

问题原因 #

TextInput使用了百分比高度height:'17%'，但父容器SafeAreaView未设置flex:1来固定占据屏幕完整高度。此时父容器高度由内部所有元素的总高度决定：当你增大Recommended的marginTop时，父容器整体高度被拉长，TextInput的百分比高度会基于变化后的父容器高度重新计算，导致它的高度自动改变。

解决方法 #

1. 给SafeAreaView添加flex:1，让它固定占据屏幕高度：

<SafeAreaView style={{flex:1}}>
  {/* 内部元素保持不变 */}
</SafeAreaView>

2. 把TextInput的百分比高度改成固定值（比如40），避免依赖父容器高度变化：

secondBackGround:{
  backgroundColor: '#3f4d7e',
  width:'83%',
  marginTop:10,
  // 替换百分比高度为固定值
  height:40,
  borderRadius:20,
  marginLeft:'auto',
  marginRight:'auto',
  paddingLeft: 20,
  // 可选：添加垂直居中样式
  justifyContent:'center'
},

调整后，无论怎么修改Recommended的marginTop，TextInput的高度都不会再变化。

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