Question

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

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

ENTRYPOINT

然后这是同一类中的onLayout函数

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

控制台日志永远不会完成。但是，如果我从onLayout属性中调用onLayout = () => { console.log("hello") }，它确实会显示在控制台中。

console.log("hello")

在过去的4个小时里，这让我感到困惑。我已经尝试了在stackoverflow和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不执行功能

1 个答案: