如何制作一个按钮，使其在单击时拍照并在长按时录像

Question

我想要制作只有一个按钮来进行照片和视频录制：

• 当我点击一次它时，它会拍一张照片

• 当我长按它后，一段时间后会开始录制视频

视图中的按钮：

<TouchableOpacity
    onPressIn={() => onPressInButton()}
    onPressOut={() => onPressOutButton()}
</TouchableOpacity>

按钮的代码：

const insidePressInButton = async () => {
    if (!pressOut) {
        setRecordingVideo(true)
        console.log('START RECORDING VIDEO')
    }
    else {
        await takePicture()
        console.log('NOT STARTED RECORDING -> PICTURE')
    }
}

let pressOut = false
const onPressInButton = async () => {
    pressOut = false
    setTimeout(() => {
        insidePressInButton()
    }, 1)
}

const onPressOutButton = async () => {
    pressOut = true
    if (recordingVideo) {
        setRecordingVideo(false)
        console.log('STOP RECORDING VIDEO')
    }
}

在setTimeout()中，我将时间仅设置为1（非常短），但等待时间很长（我认为这是React重新渲染的问题）。

从理论上讲，这个解决方案是可行的，但是我有一个大问题

当我点击一次并想要一张图片时，我必须等待超过一秒钟

他希望立即拍摄照片，并且当我按住按钮一段时间并保持按住状态时，它会录制视频

- DeveloperApps

Answer 1

您可以尝试使用onLongPress（文档）来录制视频，并通过delayLongPress（文档）设置延迟。结果是，如果您按下时间少于200毫秒，则拍摄的是图片；否则是视频录制。

<TouchableOpacity
    onPress={...}
    onLongPress={...}
    delayLongPress={200}
</TouchableOpacity>

- IT's Bruise