2.5 Events

1.Basic events

1.1.<TouchableHighlight/>

1. class Touch extends Component {
2. handlePress(){
3. console.log('press');
4. }
5. handleLongPress(){
6. console.log('longPress');
7. }
8. render() {
9. return (
10. <TouchableHighlight
11. onPress={this.handlePress}
12. onLongPress={this.handleLongPress}>
13. <View>
14. <Text>Press me!</Text>
15. </View>
16. </TouchableHighlight>
17. );
18. }
19. }

1.2. <TextInput/>

1. class Test extends Component {
2. //...
3. //handle events
4. //...
5. render() {
6. return (
7. <TextInput
8. onBlur={...}
9. onChange={...}
10. onEndEditing={...}
11. onSelectionChange={...}
12. onSubmitEditing={...}
13. </TextInput>
14. );
15. }
16. }

1.3.DeviceEventEmitter

1. //keyboardWillShow, keyboardDidShow, keyboardWillHide, keyboardDidHide
2. //keyboardWillChangeFrame, keyboardDidChangeFrame
3. //add the listener
4. var listener = DeviceEventEmitter.addListener('keyboardWillShow', (e) =>{
5. console.log('Event is fired!');
6. });
7. //remove the listener
8. listener.remove();

2.Gesture Responder System

2.1 Lifecycle 2.5 Events - 图1 2.2 example

1. class Test extends Component {
2. /* Capture handles */
3. //the responder system bubbles up from the deepest component,
4. //a parent View wants to prevent the child from becoming responder on a touch start
5. handleStartShouldSetResponderCapture(evt){
6. return true;
7. }
8. //the responder system bubbles up from the deepest component,
9. //a parent View wants to prevent the child from becoming responder on a touch move
10. handleMoveShouldSetResponderCapture(evt){
11. return true;
12. }

14. /* Lifecycle handles */
15. //Does this view want to become responder on the start of a touch?
16. handleStartShouldSetResponder(evt){
17. return true;
18. }
19. //Called for every touch move on the View when it is not the responder:
20. //does this view want to "claim" touch responsiveness?
21. handleMoveShouldSetResponder(evt){
22. return true;
23. }
24. //The View is now responding for touch events.
25. handleResponderGrant(evt){
26. console.log('you are touching me');
27. }
28. //Something else is the responder right now and will not release it
29. handleResponderReject(evt){
30. console.log('please wait in line');
31. }

33. /* event handles */
34. //touch move
35. handleResponderMove(evt){
36. console.log('touch move at:', 'X='+evt.pageX, 'Y='+evt.pageY);
37. }
38. //touch end/up
39. handleResponderRelease(evt){
40. console.log('touch end');
41. }
42. //Something else wants to become responder. Should this view release the responder?
43. handleResponderTerminationRequest(evt){
44. return true;
45. }
46. //touch cancel
47. handleResponderTerminate(evt){
48. console.log('touch canceled');
49. }
50. render() {
51. return (
52. <View
53. onStartShouldSetResponderCapture={this.handleStartShouldSetResponderCapture}
54. onMoveShouldSetResponderCapture={this.handleMoveShouldSetResponderCapture}
55. onStartShouldSetResponder={this.handleStartShouldSetResponder}
56. onMoveShouldSetResponder={this.handleMoveShouldSetResponder}
57. onResponderGrant={this.handleResponderGrant}
58. onResponderReject={this.handleResponderReject}
59. onResponderMove={this.handleResponderMove}
60. onResponderRelease={this.handleResponderRelease}
61. onResponderTerminationRequest={this.handleResponderTerminationRequest}
62. onResponderTerminate={this.handleResponderTerminate}>
63. <Text>Press me!</Text>
64. </View>
65. );
66. }
67. }

2.3 evt is a synthetic touch event with the following form nativeEvent:

  • changedTouches - Array of all touch events that have changed since the last event
  • identifier - The ID of the touch
  • locationX - The X position of the touch, relative to the element
  • locationY - The Y position of the touch, relative to the element
  • pageX - The X position of the touch, relative to the root element
  • pageY - The Y position of the touch, relative to the root element
  • target - The node id of the element receiving the touch event
  • timestamp - A time identifier for the touch, useful for velocity calculation
  • touches - Array of all current touches on the screen 3.PanResponder

3.1

1. this._panResponder = PanResponder.create({
2. // Ask to be the responder:
3. onStartShouldSetPanResponder: (evt, gestureState) => true,
4. onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
5. onMoveShouldSetPanResponder: (evt, gestureState) => true,
6. onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
7. //touch start
8. onPanResponderGrant: (evt, gestureState) => {},
9. //touch move
10. onPanResponderMove: (evt, gestureState) => {},
11. onPanResponderTerminationRequest: (evt, gestureState) => true,
12. //touch end/up
13. onPanResponderRelease: (evt, gestureState) => {},
14. //touch cancel
15. onPanResponderTerminate: (evt, gestureState) => {},
16. onShouldBlockNativeResponder: (evt, gestureState) => true,
17. });

3.2 A gestureState object has the following:

  • stateID - ID of the gestureState- persisted as long as there at least one touch on screen
  • moveX - the latest screen coordinates of the recently-moved touch
  • moveY - the latest screen coordinates of the recently-moved touch
  • x0 - the screen coordinates of the responder grant
  • y0 - the screen coordinates of the responder grant
  • dx - accumulated distance of the gesture since the touch started
  • dy - accumulated distance of the gesture since the touch started
  • vx - current velocity of the gesture
  • vy - current velocity of the gesture
  • numberActiveTouches - Number of touches currently on screen 3.3 PanResponder example in UIExplorer

原文: <https://unbug.gitbooks.io/react-native-training/content/24_events.html>