为什么使用百分比高度时View与TextInput之间会出现意外间隙？

1. React Native 布局引擎对百分比高度的计算有明确约束：子元素使用百分比高度时，父容器必须提前设置了明确的、可确定的高度值。你的外层 wrapper 样式没有设置固定高度或明确的相对高度，此时给黄色子 View 设置 height: '10%' 时，布局引擎无法找到有效的高度参照，会产生异常的布局偏移，最终在两个子元素之间生成多余间隙。
2. 当你把高度改为固定像素值 50 时，布局引擎不需要做百分比参照计算，直接按照明确的像素值渲染元素，间隙就会自动消失。

方案1：使用flex弹性布局实现相对占比（推荐） #

flex 本身就是相对布局单位，不会出现百分比高度的参照失效问题。给外层 wrapper 添加 flex: 1 属性声明其占满可用高度，再给两个子元素设置flex占比即可，示例修改代码如下：

// 结构代码
<View style={styles.wrapper}>
  <View style={{ width: '100%', flex: 1, backgroundColor: 'yellow' }}></View>
  <TextInput 
    style={[styles.edit_input, {flex: 9}]}
    numberOfLines={15}
    multiline={true}
  />
</View>

// 样式修改
wrapper: {
  flex: 1, // 新增，明确父容器占满剩余可用高度
  width: '90%',
  marginTop: '10%',
  backgroundColor: 'gray',
  borderTopWidth: 1,
},
edit_input: { 
  backgroundColor:'white',
  color: 'black', 
  borderWidth: 1, 
  textAlignVertical: 'top',
  width: '90%',
  alignSelf: 'center',
},

两者高度会按照1:9的比例自动分配父容器高度，不会出现计算异常，也不需要写固定像素值。

方案2：给父容器设置明确的相对高度 #

如果要保留百分比高度的写法，先给 wrapper 添加明确的百分比高度（如 height: '80%'，可根据需求调整），让子元素的 height: '10%' 有有效的高度参照，也可以解决间隙问题。

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