React Native (View) onLayout 不执行函数

Question

我一直在尝试从 View 组件中的 onLayout 道具获取一些值。

这是渲染函数中返回的视图：

<View onLayout={this.onLayout}>
    <Text>Hello</Text>
</View>

那么这个就是同一个class

中的onLayout函数

onLayout = () => {
  console.log("hello")
}

控制台日志永远不会完成。但是如果我从 onLayout 道具中调用 console.log("hello") 它会显示在控制台中。

<View onLayout={console.log("Hello")}>
    <Text>Hello</Text>
</View>

在过去的 4 个小时里，这让我神魂颠倒。我已经尝试了在 Whosebug 和 GitHub.

上可以找到的所有内容

我是不是做错了什么？

Answer 1

onLayout(event) {
    const {x, y, height, width} = event.nativeEvent.layout;
    const newHeight = this.state.view2LayoutProps.height + 1;
    const newLayout = {
        height: newHeight ,
        width: width,
        left: x,
        top: y,
      };

    this.setState({ view2LayoutProps: newLayout });
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.View1}>
          <Text>{this.state.view2LayoutProps.height}</Text>
        </View>
        <View onLayout={(event) => this.onLayout(event)} 
              style={[styles.View2, this.state.view2LayoutProps]} />
        <View style={styles.View3} />
      </View>
    );
  }

}

React Native (View) onLayout 不执行函数

React Native (View) onLayout does not execute functions

height

native

view

reactjs