어떻게 반응 네이티브에서 자식보기의 부모 크기를 얻을 수 있습니까?

Question

상위 뷰의 크기를이 하위 구성 요소로 보내는 방법을 이해할 수 없습니다. renderPager()에서 상위 뷰 크기에 의존하는 매개 변수를 계산하고 싶습니다. 나는 우리가 onLayout()을 통해 그것을 할 수 있다는 것을 안다. 문제는 onLayout이 모든 자식을 빌드 한 후에 만 ​​호출된다는 것입니다 (콘솔 로그에서 볼 수 있음). 내가 어떻게 해?

onPageLayout = (event) => { 
    const { width, height } = event.nativeEvent.layout; 
    console.log("ON LAYOUT"); 
    }; 

render() { 
    return (
     <View 
     style={styles.root} 
     onLayout={this.onPageLayout} 
     > 
     {this.renderPager()} 
     </View> 
    ); 
    } 

renderPager =() => { 
    // how can get root view's size here 
    return (
     <IndicatorViewPager 
     ref={(ref) => (this.viewPager = ref)} 
     scrollEnabled={!this.state.isDragging} 
     onPageScroll={this.onPageScroll} 
     style={styles.pageRoot} 
     > 
     {this.renderPages()} 
     </IndicatorViewPager> 
    ); 
    }; 

는

Answer 1

당신은 아마 소품으로 데이터를 전달하고, 저장소에서 소품 데이터를 취할 수 있습니다 감사합니다. 모든 것이 렌더링 된 후에 만 ​​onLayout이 시작된다는 점에서 옳습니다. 그러나 이는 단순히 첫 번째 렌더링에서 null 값을 가진 props를 전달해야한다는 것을 의미합니다. 예를 들어 :

onPageLayout = (event) => { 
    const { width, height } = event.nativeEvent.layout; 
    console.log("ON LAYOUT"); 
    this.setState({width, height}) 
    }; 

render() { 
    return (
     <View 
     style={styles.root} 
     onLayout={this.onPageLayout} 
     > 
     {this.renderPager(this.state.width, this.state.height)} 
     </View> 
    ); 
    } 

renderPager = (width, height) => { 
    // Do something if width or height are null 
    // how can get root view's size here 
    return (
     <IndicatorViewPager 
     ref={(ref) => (this.viewPager = ref)} 
     scrollEnabled={!this.state.isDragging} 
     onPageScroll={this.onPageScroll} 
     style={styles.pageRoot} 
     > 
     {this.renderPages()} 
     </IndicatorViewPager> 
    ); 
    }; 

은 또한 당신은 부모의 measure 기능을 사용할 수 있지만 그 조금 성가신 것 같아요.