React Native 之View元件的回撥
阿新 • • 發佈:2019-02-07
/** * 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 函式靠後渲染的元件)處理觸控事件,但這三個回撥函式總能收到事件,而不管使用者當前觸控區域是空白的,還是其它元件以及處理了觸控事件。