反应本机检测长按结束

Question

我的问题很简单，我试图检测 onLongPress 事件的结束。基本上是在用户松开按键时。

我尝试了 TouchableWithoutFeedback 中所有可能的事件，但一次只有一个事件被触发。

import React from 'react'

import {
	View,
	Text,
	Dimensions,
	CameraRoll
} from 'react-native'

import Camera from 'react-native-camera';

const { width, height } = Dimensions.get('window')
class ImageBrowser extends React.Component {
	static navigationOptions = {
		title: 'Unsplash Images',
	}

	state = {
		images: [],
		loading: true,
		page: 1,
		isRecording : false
	}

	takeVideo(){
		this._recordVideo.bind(this);
	}

	_recordVideo(){
		this.camera.capture({mode: Camera.constants.CaptureMode.video})
			.then((data) => {
				console.log(data);
			})
			.catch((err) => {
				console.log(err)
			})
	}

	_stopRecord(){
		this.camera.stopCapture();
	}

	render() {
		return (
			<View style={{flex: 1}}>
				<Camera
					ref={(cam) => {this.camera = cam;}}
					style={styles.preview}
					aspect={Camera.constants.Aspect.fill}
					type={Camera.constants.Type.front}
				>
					<Text style={styles.capture} onLongPress={this.takeVideo.bind(this)} onPress={this._stopRecord.bind(this)} onPressOut={this._stopRecord.bind(this)}>[CAPTURE]</Text>
				</Camera>
			</View>
		)
	}
}

const styles = {
	preview: {
		flex: 1,
		justifyContent: 'flex-end',
		alignItems: 'center',
		height: Dimensions.get('window').height,
		width: Dimensions.get('window').width
	},
	capture: {
		flex: 0,
		backgroundColor: '#fff',
		borderRadius: 5,
		color: '#000',
		padding: 10,
		margin: 40
	}
}

export default ImageBrowser

Answer 1

使用 Touch*** 组件

onPressIn

onPressOut

http://facebook.github.io/react-native/docs/touchablewithoutfeedback.html

Answer 2

更好的解决方案是应用@yongqian_iOS的建议并执行以下操作：

<TouchableOpacity
   onPressOut={ () => console.warn('ENDED') }
   onLongPress={ () => console.warn('STARTED LONG PRESS') } 
/>

Answer 3

回答我自己的问题。我终于使用了手势响应器

onStartShouldSetResponder => 检测用户何时开始按下该元素 onResponderRelease => 检测用户何时停止按下该元素

以下是官方文档中使用PanResponder进行 View 摄取手势的示例：

class ExampleComponent extends Component {
    constructor(props) {
      super(props)
      this._panResponder = PanResponder.create({
        // Ask to be the responder:
        onStartShouldSetPanResponder: (evt, gestureState) => true,
        onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
        onMoveShouldSetPanResponder: (evt, gestureState) => true,
        onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

        onPanResponderGrant: (evt, gestureState) => {
          // The gesture has started. Show visual feedback so the user knows
          // what is happening!

          // gestureState.d{x,y} will be set to zero now
        },
        onPanResponderMove: (evt, gestureState) => {
          // The most recent move distance is gestureState.move{X,Y}

          // The accumulated gesture distance since becoming responder is
          // gestureState.d{x,y}
        },
        onPanResponderTerminationRequest: (evt, gestureState) => true,
        onPanResponderRelease: (evt, gestureState) => {
          // The user has released all touches while this view is the
          // responder. This typically means a gesture has succeeded
        },
        onPanResponderTerminate: (evt, gestureState) => {
          // Another component has become the responder, so this gesture
          // should be cancelled
        },
        onShouldBlockNativeResponder: (evt, gestureState) => {
          // Returns whether this component should block native components from becoming the JS
          // responder. Returns true by default. Is currently only supported on android.
          return true;
        },
      });
    }

    render() {
      return (
        <View {...this._panResponder.panHandlers} />
      );
    }
  }