サブビューの高さに基づいて親ビューの高さを設定する方法

Question

TextサブセットまたはTextコンポーネントサブビューのいずれかを含むカスタマイズされた親Viewを書きたいと思います。 Textビューの高さに基づいて、親をViewの高さに設定する方法はありますか？

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

あなたは、それぞれタイトルテキストと本文テキストを返すか、いずれかが表示され、その機能を使用して、ビュー全体を置き換えるために持っていない場合は、高さゼロでビューを返すために別のヘルパー関数を作成することができます。だから、このようなあなたのコードスニペットを置き換えることができます：

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

あなたはそれが子供の高さに応じて拡大します。この方法であなたのViewコンテナ

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

にflex:0を設定することができます。

いくつかの情報についてflexプロパティ：Flexは正の数である場合には

、それは部品が柔軟になり、それ は、そのフレックス値に比例した大きさになります。したがって、フレックスが に設定されているコンポーネントは、フレックスが1に設定されているコンポーネントの2倍のスペースをとります。

フレックスが0の場合、コンポーネントは幅と高さに応じてサイズが変更され、柔軟性に欠けます。

flexが-1の場合、コンポーネントの幅は通常、幅に合わせて の高さになります。ただし、十分なスペースがない場合、コンポーネントは のminWidthおよびminHeightに縮小します。