React Native条件渲染Else分支样式未生效问题求助

问题现象 #

当currentTrail为undefined时，外层<View>的currentTrailBottomSheetContainer样式（含5px边框）正常显示；但currentTrail存在时，渲染的路线名称（如"Test 1"）和操作按钮（INFO|EDIT|X）区域没有被外层边框包裹，边框样式未生效。

代码片段 #

TSX 代码 #

<View style={styles.currentTrailBottomSheetContainer}>
  {currentTrail == undefined ? (
    <Text style={styles.currentTrailBottomSheetText}>No Current Trail</Text>
  ) : (
    <View style={styles.currentTrailContainer}>
      <View style={styles.currentTrailTextContainer}>
        <Text style={styles.currentTrailBottomSheetText}>{currentTrail.trailName}</Text>
      </View>
      <View style={styles.currentTrailSettingsContainer}>
        <TouchableOpacity style={styles.currentTrailInfoButton}>
          <Text style={{ textAlign: "center" }}>INFO</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.currentTrailEditButton}>
          <Text style={{ textAlign: "center" }}>EDIT</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.currentTrailRemoveButton}>
          <Text style={{ textAlign: "center" }}>X</Text>
        </TouchableOpacity>
      </View>
    </View>
  )}
</View>

相关样式 #

currentTrailBottomSheetContainer: {
  height: "auto",
  width: "100%",
  marginBottom: 20,
  borderWidth: 5,
},
currentTrailContainer: { 
  flex: 1, 
  flexDirection: "column", 
  alignContent: "space-between", 
  justifyContent: "space-between", 
},

问题原因 #

1. currentTrailContainer设置了flex: 1，但外层容器currentTrailBottomSheetContainer的高度为auto（自适应子元素），在没有明确父容器高度的情况下，flex: 1无法正确撑开父容器，反而会导致子元素内容超出父容器范围，使得边框看起来未包裹内容。
2. alignContent: "space-between"用于多行flex布局的行间距控制，在单轴（column方向）布局下无实际作用，属于冗余属性。

解决方案 #

修改currentTrailContainer的样式，移除不必要的flex:1，调整布局属性并添加内边距优化显示：

currentTrailBottomSheetContainer: {
  height: "auto",
  width: "100%",
  marginBottom: 20,
  borderWidth: 5,
  // 可选：明确边框颜色，确保可见
  borderColor: "black",
},
currentTrailContainer: { 
  flexDirection: "column", 
  justifyContent: "space-between", 
  // 移除flex:1，添加内边距避免内容贴边框
  padding: 12,
  // 如果需要上下间距，可添加minHeight确保容器有最小高度
  minHeight: 80,
},

效果说明 #

修改后，外层容器会根据子元素的实际高度自适应，边框将正确包裹所有内容，无论currentTrail是否存在，都能保持一致的边框显示效果。

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