如何在单击时为照片制作按钮，并在按住照片时录制视频

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 重新渲染的问题(

从理论上讲，这个解决方案有效，但我有一个大问题

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

他想这样做，以便立即拍摄照片，当我按住按钮片刻并按住它时，正在录制视频

Answer 1

您可以尝试使用onLongPress(doc(进行视频录制，并通过delayLongPress(doc(设置延迟。因此，如果您按的按钮小于200，则在其他情况下的图片是视频录制

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