1. 程式人生 > >React Native 之View元件的回撥

React Native 之View元件的回撥

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class ViewProject extends Component {
  render() {
    return (
      <View style={styles.container}
        onTouchStart={this._onTouchStart}
        onTouchMove={this._onTouchMove}
        onTouchEnd={this._onTouchEnd}
      >
      </View>
    );
  }
  _onTouchMove(event){
   console.log("touch move:"+event.timeStamp+",X:"+event.nativeEvent.locationX+",Y:"+event.nativeEvent.locationY);
  }
  _onTouchStart(event){
   console.log("touch start:"+event.timeStamp+",X:"+event.nativeEvent.locationX+",Y:"+event.nativeEvent.locationY);
  }
  _onTouchEnd(event){
   console.log("touch end:"+event.timeStamp+",X:"+event.nativeEvent.locationX+",Y:"+event.nativeEvent.locationY);
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor:"#F5FCFF",
  }
});
AppRegistry.registerComponent('ViewProject', () => ViewProject);

在React Native 開發中,通常在最上層的元件中(render 函式靠後渲染的元件)處理觸控事件,但這三個回撥函式總能收到事件,而不管使用者當前觸控區域是空白的,還是其它元件以及處理了觸控事件。