Reactnative 条件呈现Else语句不会将样式应用于我的组件

将flex: 0与currentTrailContainer相加(example)

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',
  },
});