在响应本机中未调用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)} />
    )
  }
}