Question

这是我的代码示例，请告诉我使用ref的目的

<Camera
          ref={(cam) => {
           this.Camera = cam;
         }}
          style={styles.preview}
          aspect={camera.constants.Aspect.fill} >
          <Text style={styles.capture} 
          onPress = { this.takePicture.bind(this )}>
          [CAPTURE]
          </Text>

</Camera>

Answer 1

你可以使用引用来做这样的事情：

    <Camera
          ref={(cam) => {
           this.Camera = cam;
         }}
          style={styles.preview}
          aspect={camera.constants.Aspect.fill} >
          <Text style={styles.capture} 
          onPress = { this.takePicture.bind(this )}>
          [CAPTURE]
          </Text>

</Camera>

takePicture() {
    this.Camera.capture()
      .then((data) => console.log(data))
      .catch(err => console.error(err));
}

ref返回对组件的引用。在上面的示例中，您要在Camera中存储组件this.Camera的引用（您可以将其命名为this.xyz或其他任何名称）。现在，您可以使用Camera访问this.Camera组件的所有方法。在上面的示例中，capture是Camera组件的一种方法，您可以像this.Camera.capture()一样调用它。

你可以这样想，以便更容易理解：

Camera = { // your <Camera /> component
    capture: function(){ console.log('CAPTURE')}
}
myCamera = Camera // ref is doing something like this("myCamera" replaces "this.Camera", "Camera" replaces 'cam" )
myCamera.capture() // now you can call methods of Camera Object

对于React本机使用什么Ref？请告诉我这里做的是什么

1 个答案: