So legen Sie die Höhe der übergeordneten Ansicht basierend auf der Höhe der Unteransicht fest

Question

Ich möchte ein benutzerdefiniertes übergeordnetes Element View schreiben, das entweder eine oder zwei Text Komponentenunteransichten enthält. Gibt es eine Möglichkeit, die Höhe des übergeordneten Elements View basierend auf der Höhe der Ansicht Text festzulegen?

class ParentView extends Component { 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    const { 
     titleText, 
     bodyText, 
    } = this.props; 

    //if titleText is passed to props, measure it's height; 
    //if bodyText is passed to props, measure it's height; 
    // set contentContainer height = titleText + bodyText + someMargin 
    return (
     <View style={styles.contentContainer}>   
     {titleText && <Text style={styles.title}> 
      {titleText} 
     </Text>} 
     {bodyText && <Text style={styles.body}> 
      {bodyText} 
     </Text>} 
     </View> 
    ); 
    } 
} 

Answer 1

Sie können eine separate Hilfsfunktion erstellen Titel Text und Body Text jeweils oder Rückansicht mit einer Höhe von Null zurück, wenn Sie Ihre gesamte Ansicht mit dieser Funktion nicht haben zu zeigen, und ersetzen . So könnten Sie Ihr Code-Snippet wie folgt ersetzen:

class ParentView extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
    isTitle : props.titleText, 
    isBody: props.bodyText 
    } 
} 

    render() { 

    //if titleText is passed to props, measure it's height; 
    //if bodyText is passed to props, measure it's height; 
    // set contentContainer height = titleText + bodyText + someMargin 
    return (
     {/* include this helper function to return Title Text */}   
    {this.returnText()} 

    ); 
    } 
} 
    returnText() { 
     if(this.state.isTitle && this.state.isBody) { 
      return(
       <View style={styles.contentContainer}>   
        <Text style={styles.title}> 
         {titleText} 
        </Text> 
        <Text style={styles.body}> 
         {bodyText} 
        </Text> 
       </View> 
      ) 
     } 
     else if(this.state.isTitle && !this.state.isBody) { 
      return(
       <View style={styles.contentContainer}>   
        <Text style={styles.title}> 
         {titleText} 
        </Text> 
        <View style = {{height: 0}}/> 
       </View> 
       ) 
     } 
     else if(!this.state.isTitle && this.state.isBody) { 
      return(
       <View style={styles.contentContainer}> 
        <View style = {{height: 0}}/> 
        <Text style={styles.body}> 
         {bodyText} 
        </Text> 
       </View> 
       ) 
     } 
     else { 
      return(
       <View style={styles.contentContainer}> 
        <View style = {{height: 0}}/> 
       </View> 
       ) 
      } 
     } 

Answer 2

Sie können festlegen, flex:0 auf Ihrem View Container

const styles = StyleSheet.create({ 
    contentContainer: { 
    flex: 0 
    } 
}); 

mit dieser Art und Weise wird es gemäß der Kinder Höhe erweitern.

Ein paar Informationen über flex Eigenschaft:

Wenn flex eine positive Zahl ist, ist es die Komponente flexibel machen und es wird seinen Flex Wert proportional dimensioniert werden. So eine Komponente mit Flex Satz 2 zweimal den Raum als eine Komponente mit Flex auf 1 gesetzt

nehmen Wenn flex 0 ist, wird das Bauteil entsprechend der Breite und Höhe so bemessen und es ist unflexibel.

Wenn flex -1 ist, wird die Komponente normalerweise nach Breite und Höhe sortiert. Wenn jedoch nicht genügend Platz vorhanden ist, schrumpft die Komponente auf ihre minimale und minimale Höhe.