当我点击并录制视频时如何为照片制作按钮答案

【问题标题】：How to make a button for a photo when I click and record video when I hold it当我点击并录制视频时如何为照片制作按钮
【发布时间】：2020-09-03 01:55:28
【问题描述】：

我正在尝试只制作一个用于照片和视频录制的按钮：

按一下就会拍照
当我拿着它时，过了一会儿视频正在录制

视图中的按钮：

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

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

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

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

【问题讨论】：

标签： javascript reactjs react-native react-hooks

【解决方案1】：

您可以尝试使用onLongPress(doc) 进行视频录制，并通过delayLongPress (doc) 设置延迟。所以如果你按小于200，则为图片，否则为视频录制

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

【讨论】：