Question

这是我的代码的摘录：

{{1}}

控制台显示“第一个日志”，但不显示第二个日志。视图似乎正确呈现。我尝试了其他视图，但结果是一样的。我正在使用react-native 0.48.4。

Answer 1

我通过更改大于0的初始高度解决了这个问题，然后在更改了ChildView的布局时成功触发了onLayout函数。

＆＃13;

  constructor(props) {
    super(props);
    this.state = {
      title: '',
      height: 0 // changed to 1
    };
  }
  onLayout = (event) => {
    console.log('on layout:')
    const {
      x,
      y,
      width,
      height
    } = event.nativeEvent.layout;
    console.log(x, y, width, height);
  }
  render() {
    return (
      <View style={[styles.container, {height: this.state.height}]}>
        <View onLayout={this.onLayout}>
          <ChildView/>
        </View>
      </View>
    )
  }

＆＃13;

由于这个突破性变化： Android：仅在布局实际更改时调用onLayout https://github.com/facebook/react-native/wiki/Breaking-Changes#android-only-call-onlayout-when-layout-has-actually-changed-15429e---astreet

Answer 2

在我的案例中，onLayout之所以没有被调用是因为项目是在FlatList中渲染的，因此在装载时仅渲染了几个项目。

Answer 3

刚刚更新为react-native 0.48.4，我无法在iOS或Android上重现错误。但是，由于您没有使用“e”，因此您应该将代码更改为

<View onLayout={() => console.log('second log')}>

甚至

<View onLayout={console.log("second log")}>

onLayout没有被召唤

3 个答案: