하위 뷰의 높이를 기준으로 부모 뷰의 높이를 설정하는 방법

Question

Text componet subView 또는 두 개의 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 속성 :

플렉스는 양수이며, 그것은 구성 요소를 유연하게하고 는 플렉스 값에 비례 크기가 될 것입니다. 그래서 2 플렉스 세트 성분 1.

플렉스 0 플렉스 세트 성분 배의 공간을 취할 것, 성분은 폭과 높이 에 따라 크기 그리고 융통성이다.

flex가 -1이면 구성 요소의 너비는 일반적으로 너비와 입니다. 그러나 공간이 충분하지 않은 경우 구성 요소는 의 minWidth 및 minHeight로 축소됩니다.