元器件触发onProperty

Question

我试图触发(引用，调用，正确的术语？)来自react本机照片视图API的此组件属性的onScale：

<PhotoView
    source={{ uri:  }}
    onLoad={() => console.log('onLoad called')}
    onTap={(event) =>
    console.log(`onTap called: ${event.nativeEvent.x}${event.nativeEvent.y}`)}
    onScale={() => console.log('onScale called')}
    minimumZoomScale={1}
    maximumZoomScale={3}
    scale={0.5}
    resizeMode={'contain'}
    androidScaleType={'fitXY'}
    style={styles.photo}
/>

我如何“触发”这个onScale={}属性，让一个<Button onClick={triggerOnScale()} />来放大缩放因子呢？任何直接的代码示例或指向技术/方法的指针都是非常感谢的！

Answer 1

如果onScale是PhotoView组件的一个方法，那么您可以设置一个引用来调用它：

handleOnClick = () => this.photoView.onScale()
//just use the handleOnClick wherever you want your click and it will call onScale also

   <PhotoView
        source={{ uri:  }}
        onLoad={() => console.log('onLoad called')}
        onTap={(event) =>
        console.log(`onTap called: ${event.nativeEvent.x}${event.nativeEvent.y}`)}
        **ref={(photoView) => this.photoView = photoView}**
        minimumZoomScale={1}
        maximumZoomScale={3}
        scale={0.5}
        resizeMode={'contain'}
        androidScaleType={'fitXY'}
        style={styles.photo}
    />

Answer 2

如果希望onScale处理程序和按钮的onClick处理程序触发相同的函数，则只需将函数绑定到包含的组件，然后将函数的引用分别传递给Button和PhotoView。

class YourComponent extends Component {
  constructor(props){
    super(props);
    this.someFunction = this.someFunction.bind(this);
  }

  someFunction() {
    console.log('Inside some Function.);
  }

  render() {
    return(
     <div>
       <PhotoView onScale={this.someFunction} />
       <Button onClick={this.someFunction} />
     </div>
    );
  }
}