长按自定义复选框答案

【问题标题】：Long press on custom checkbox长按自定义复选框
【发布时间】：2016-09-05 17:56:59
【问题描述】：

我正在尝试在复选框上创建一个长按处理程序。带有组件的包是https://www.npmjs.com/package/react-native-checkbox——我认为它是默认的。问题是复选框拦截了onPressIn 和onPressOut 事件，而我的TouchableWithoutFeedback 组件不发出任何东西。代码如下：

    var pressStart = 0;
    const pressTimeout = 400;

    function pressIn() {
        alert(0);

        pressStart = parseInt((new Date()).getTime() / 1000);
    }

    function pressOut() {
        var pressEnd = parseInt((new Date()).getTime() / 1000);
        if (pressEnd - pressStart < pressTimeout) return;

        alert(1);
    }

    return (
        <View style={style.container}>
            <TouchableWithoutFeedback onPressIn={pressIn} onPressOut={pressOut}>
                <View>
                    {/*<Text>asdasdasd</Text>*/}
                    <CheckBox checked={this.state.done} labelStyle={style.checkbox} label={this.state.name} onChange={toggleChecked} />
                </View>
            </TouchableWithoutFeedback>
        </View>
    );

另外，如果我使用Text 组件而不是CheckBox — 它会触发pressIn 事件，但pressOut 不起作用（我看到alert(0)，但不是alert(1)）。

【问题讨论】：

标签： javascript android reactjs checkbox react-native

【解决方案1】：

好的，首先，我从支持onPressIn 和onPressOut 事件的react-native-checkbox 包创建了一个分支： https://www.npmjs.com/package/react-native-checkbox-touch-events

但我认为它没有用，因为你可以这样做（我不保证它会起作用）：

<TouchableWithoutFeedback delayPressIn={0} onPressIn={pressIn} onPressOut={pressOut}>
    <View>
        <CheckBox onPress={press} />
    </View>
</TouchableWithoutFeedback>

无论如何，我会使用我的包，我懒得测试这个解决方案，也不想对我的工作感到失望。

另外：如果你想要毫秒，不要将getTime() 除以 1000...

【讨论】：