如何使用expo相机在react natie中实现点击焦点？

Question

我正在使用 expo 相机，并且我已将其包裹在

TapGestureHandler

内，以便我可以检测点击事件。这是代码：

<TapGestureHandler onHandlerStateChange={onSingleTapEvent}>
  <View>
    <Camera
      ref={cameraRef}
      type={cameraType}
      ratio={ratio}
      onCameraReady={onCameraReady}
      autoFocus={Camera.Constants.AutoFocus.on}
    ></Camera>
  </View>
</TapGestureHandler>;

我的

onSingleTapEvent

：

 const onSingleTapEvent = (event) => {
    if (event.nativeEvent.state === State.ACTIVE) {
      console.log("Single tap event: ", event.nativeEvent);
    }
  };

当我点击屏幕时，我会看到以下控制台输出：

    Single tap event:  Object {
  "absoluteX": 210.3333282470703,
  "absoluteY": 527.3333129882812,
  "handlerTag": 3,
  "numberOfPointers": 1,
  "oldState": 2,
  "state": 4,
  "x": 210.3333282470703,
  "y": 446.3333435058594,
}

我的问题是，如何实现点击焦点？据我了解，我需要使用expo相机的

focusDepth

property，但我不知道如何设置它？任何想法、沼泽或伪代码都将被授予！

Answer 1

我找到了一个很好的方法来做到这一点，通过重置用户点击事件的自动对焦，并且效果非常好。

export default function CameraScreen({ route, navigation }: any) {
    const [isRefreshing, setIsRefreshing] = useState(false);
    const [focusSquare, setFocusSquare] = useState({ visible: false, x: 0, y: 0 });

    useEffect(() => {
        if (isRefreshing) {
            setIsRefreshing(false);
        }
    }, [isRefreshing]);

    // Function to handle touch events
    const handleTouch = (event: any) => {
        const { locationX, locationY } = event.nativeEvent;
        setFocusSquare({ visible: true, x: locationX, y: locationY });

        // Hide the square after 1 second
        setTimeout(() => {
            setFocusSquare((prevState) => ({ ...prevState, visible: false }));
        }, 1000);

        setIsRefreshing(true);
    };

    return (
    <GestureHandlerRootView style={{flex: 1}}>
        <PinchGestureHandler
          onGestureEvent={handlePinch}
          onHandlerStateChange={(event) => {
            if (event.nativeEvent.state === State.END) {
              const scale = event.nativeEvent.scale;
              setZoom((currentZoom) => scale * currentZoom);
            }
          }}
        >
          <View style={styles.container}>
            <Camera
              style={styles.camera}
              type={type}
              ref={camera}
              zoom={zoom}
              autoFocus={!isRefreshing ? AutoFocus.on : AutoFocus.off}
              onTouchEnd={handleTouch} // Handle touch to set focus point
            >
            </Camera>

            {focusSquare.visible && (
              <View
                style={[
                  styles.focusSquare,
                  { top: focusSquare.y - 25, left: focusSquare.x - 25 },
                ]}
              />
            )}

          </View>
        </PinchGestureHandler>
      </GestureHandlerRootView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    },
    camera: {
        flex: 1,
    },
    focusSquare: {
        position: 'absolute',
        width: 50,
        height: 50,
        borderWidth: 2,
        borderColor: 'white',
        backgroundColor: 'transparent',
    },
});