IT技术 - 将 onLayout event.nativeEvent.layout.height 从父组件传递到子组件会导致高度值无限增长 - 吾爱随笔录

在 rnplay.org 上查看正在运行的代码- 如果您对代码进行了更改，请重新加载浏览器窗口并再次点击“点击播放”。我在组件内部做了一些笔记来解释问题。

这是我的书面解释：

我的基本问题：我想让两个兄弟组件具有相同的高度。同级（此处：SubComponent1）的内容是从数据库中动态获取的，因此定义了父级的高度。我希望它也定义子组件 2 的高度。见图：

我试图通过通过 props 将父级的高度发送到静态子级（子组件 2）来实现这一点。这是render父组件中的部分：

render: function() {
  return (
    <View style={styles.parentContainer} onLayout={this._onLayoutEvent}>
      <Text>Parent Component </Text>
      <SubComponent1 />
      <SubComponent2 parentHeight={this.state.parentHeight} />
    </View>
  );
},

_onLayoutEvent: function(event) {
  this.setState({parentHeight: event.nativeEvent.layout.height});
}

在这里我将它添加到孩子：

<View style={[styles.subComponent2View, {height: this.props.parentHeight}]}>

但是，这不起作用！子组件的高度无限循环地增加..见图片：

令人惊讶的是，除以1.01它起作用了！也就是说，将孩子中的上述行更改为

<View style={[styles.subComponent2View, {height: this.props.parentHeight / 1.01}]}>

不会导致身高增长，我得到以下信息，您几乎看不到0.01. 然而除以1.001再次导致无限循环......我真的无法解释为什么！这是潜水时的结果1.01：

有人可以解释这种奇怪的行为吗？

我的问题有其他解决方案吗？- alignSelf: 'stretch'SubComponent2 上的设置也不起作用。- 将一个兄弟姐妹的高度发送到另一个兄弟姐妹（即从子组件 1 到子组件 2）可能会有所帮助吗？如果是这样，我可能需要使用该Flux模式来实现一些东西，对吗？