ReactNative：自定义组件的ref和onLayout

Question

我有一个自定义组件如下。有趣的是，ref未设置，onLayout未被触发。如果我将MyView包含在View类中的另一个Parent内，则会解决这些问题。

ref和onLayout都没有工作

const MyView = props => 
      <View style={{flex: 1}}>
        {this.props.children}
      </View>

参考资料

class MyView extends Component {
  render() {
    return (
      <View style={{flex: 1}}>
        {this.props.children}
      </View>
    )
  }
}

示例用法

class Parent extends Component {
  render() {
    return (
      <MyView ref={c => this.myView = c} onLayout={e => console.log(e)} />
    )
  }
}

Answer 1

ref仅适用于组件，这就是它在第一种情况下不起作用的原因。

onLayout是View的一种方法，不会被每个Component继承。传入prop并将其设置为包含View可以解决问题。