React Native Expo：如何调整View高度，使背景仅覆盖选择菜单与输入框

问题说明 #

使用React Native Expo开发时，用View包裹SelectList选择菜单和TextInput数字输入框，当前View设置了flex:1，导致黑色背景占据过多垂直空间，需求是仅让子组件所在区域显示黑色背景。

原View代码：

<View style={{ 
  flex: 1,
  flexDirection: 'row',
  alignItems: 'center',
  backgroundColor: "black",
  width: "100%"
}}>

<SelectList
  setSelected={(val) => setSelected(val)} 
  data={data} 
  save="value"
  placeholder="Produto"
/>
<TextInput
  style={{ width: "50%" }}
  label="Quantia"
  returnKeyType="done"
  value={delivery}
  onChangeText={(text) => setDelivery(text)}
/>
</View>

测试截图说明：黑色背景占据屏幕大部分垂直区域，选择菜单与输入框仅显示在顶部区域。

解决方案 #

核心是移除flex:1属性，因为flex:1会让View填充父容器的所有剩余空间。修改后View会根据子组件的尺寸自适应高度，同时可以添加内边距优化排版：

修改后的代码：

<View style={{ 
  flexDirection: 'row',
  alignItems: 'center',
  backgroundColor: "black",
  width: "100%",
  paddingVertical: 10, // 可选：添加垂直内边距优化间距
  paddingHorizontal: 15 // 可选：添加水平内边距
}}>

<SelectList
  style={{ width: "50%" }} // 给SelectList设置宽度，避免布局挤压
  setSelected={(val) => setSelected(val)} 
  data={data} 
  save="value"
  placeholder="Produto"
/>
<TextInput
  style={{ width: "50%" }}
  label="Quantia"
  returnKeyType="done"
  value={delivery}
  onChangeText={(text) => setDelivery(text)}
/>
</View>

关键调整点 #

• 移除flex:1：让View不再强制占满父容器剩余空间，而是根据子元素高度自适应
• 给SelectList设置宽度：确保两个子组件在横向布局中各占一半，避免布局错乱
• 可选添加内边距：让内容与背景边缘有间距，提升视觉体验

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