如何在react-native中获取子视图中的父级大小？

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

你也可以使用父级的

measure

功能，但我认为这可能有点麻烦。

Answer 2

https://gist.github.com/sturmenta/2bf6fa1e58d30c5977810b737c6173c0

import React, {useState} from 'react';
import {View, ViewProps} from 'react-native';

interface ContainerWithDimensionsProps extends ViewProps {
  children: ({
    width,
    height,
  }: {
    width: number;
    height: number;
  }) => React.ReactNode;
}

export const ContainerWithDimensions: React.FC<
  ContainerWithDimensionsProps
> = ({children, ...props}: ContainerWithDimensionsProps) => {
  const [dimensions, setDimensions] = useState({width: 0, height: 0});

  return (
    <View
      onLayout={event =>
        setDimensions({
          width: event.nativeEvent.layout.width,
          height: event.nativeEvent.layout.height,
        })
      }
      {...props}>
      {children(dimensions)}
    </View>
  );
};

// ────────────────────────────────────────────────────────────────────────────────
// usage

// <ContainerWithDimensions>
//   {({width, height}) => {
//     console.log('width', width);
//     console.log('height', height);
//     return <View />;
//   }}
// </ContainerWithDimensions>;