onLayout没有被称为反应原生

Question

我正在尝试使用此代码检测宽度更改

class MyClass extends Component {
  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 });
    alert('ok');
  }

永远不会调用onLayout函数。代码有问题吗？我在这个网站上找到了代码。

Answer 1

您是否曾将onLayout添加到MyClass呈现的组件中？它不是React.Component实例上的生命周期方法（如componentDidMount），它是来自其他组件的事件，您可以通过提供onLayout 回调属性到其他组件。它是react-native内置组件的一项功能。

class MyClass extends Component {
  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 });
    alert('ok');
  }

  render() {
    return (
      <View onLayout={e => this.onLayout(e)} />
    )
  }
}