条件渲染 else 语句不会将样式应用于我的组件

Question

我遇到了这个奇怪的问题，如果用户没有选择轨迹，我会动态渲染“没有当前轨迹”，但如果用户选择了轨迹，我想渲染一些有关轨迹信息和按钮的内容。所有这些都包含在“currentTrailBottomSheetContainer”样式中。由于某种原因，如果 currentTrail == undefined，则样式仅应用于 True 语句，但如果语句为 false，则不会应用“currentTrailBottomSheetContainer”样式，即使 false 语句仍包含在 .有谁知道可能出了什么问题吗？

多伦多证券交易所代码：

<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”和“| 信息 | 编辑 | X |” 周围的边框就像“无当前踪迹”周围的边界

Answer 1

将

flex: 0

添加到

currentTrailContainer

（示例）

import {
  Text,
  SafeAreaView,
  StyleSheet,
  TouchableOpacity,
  View,
} from 'react-native';
import { useState } from 'react';

export default function App() {
  const [currentTrail, setCurrentTrail] = useState(true);
  return (
    <SafeAreaView style={styles.container}>
      <TouchableOpacity
        style={styles.currentTrailInfoButton}
        onPress={() => {
          setCurrentTrail(() => !currentTrail);
        }}>
        <Text style={{ textAlign: 'center' }}>Toggle</Text>
      </TouchableOpacity>

      <View style={styles.currentTrailBottomSheetContainer}>
        {currentTrail ? (
          <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>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  currentTrailBottomSheetContainer: {
    height: 'auto',
    width: '100%',
    marginBottom: 20,
    borderWidth: 5,
  },
  currentTrailContainer: {
    flex: 0, // Add flex:0 this will ensure that the view will get the space it requires
    flexDirection: 'column',
    alignContent: 'space-between',
    justifyContent: 'space-between',
  },
});