如何在反应原生的子视图中获取父级大小？

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只有在所有东西都被渲染后才会被触发，但这只是意味着你必须在第一次渲染时传递一个空值的道具。例如：

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

你也可以使用measureparent的功能，但我认为这可能有点麻烦。