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://github.com/indiespirit/react-native-chart-kit

你的数据集必须是这样的（在这个例子中我们画了 3 条线，每个数据标签代表一条线的数据）

datasets: [{ data: [ 50, 50, 50, 50, 50, 50 ] },
{ data: [ 20, 20, 20, 20, 20, 20 ] },{ data: [ 67, 67, 67, 67, 67, 67 ] }] };

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

2 个答案: