为什么我的 React Native 组件不存在 this.props.onLayout？

Question

I have the following class in my React Native app (using Typescript):

class Component1 extends React.Component<IntroProps, {}> {
  constructor(props){
    super(props)
    console.log(props.onLayout)
  }
  ...
}

I read in the documentation on the View class that any View or component that inherits from it have this.props.onLayout . However, this logs undefined , and if I use this.props.onLayout instead of props.onLayout , it gives the warning "Property 'onLayout' does not exist on type 'Readonly & Readonly<{ children?: ReactNode;>' ". I've seen other examples of people using this.props.onLayout in their component similar to mine, except that mine uses TypeScript.

What I Want To Know:

Why can't I access this.props.onLayout here, and how can I access it?

Answer 1

the onlayout belongs view, you can use as the following code:

class Component1 extends React.Component<IntroProps, {}> {
  constructor(props){
    super(props)
  }
  render() {
   <View onLayout={this.props.onLayout} style={[{},this.props.containStyle]}>
      <Image source={{ uri: 'http://fillmurray.com/200/200' }} width={200} 
     height={200} />
      <Text>My Picture</Text>
    </View>
  }
  ...
} 
class Example extends Component {
  //this is a method
  onLayout = (e) => {
    this.setState({
      width: e.nativeEvent.layout.width,
      height: e.nativeEvent.layout.height,
      x: e.nativeEvent.layout.x,
      y: e.nativeEvent.layout.y
    })
  }

  render (
    <Component1  onLayout={this.onLayout} containerStyle={width:this.state.width}/>
  )
}

you can look at this article , in some content, it show the React.componet source code and analysis it. Actually,React.component is a fuction.

function ReactComponent(props, context, updater) {
  this.props = props;
  this.context = context;
  this.refs = emptyObject;
  // We initialize the default updater but the real one gets injected by the
  // renderer.
  this.updater = updater || ReactNoopUpdateQueue;
}

the more you want to learn, you can look at the article and read the source code.