/** * 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+",Y:"+event.nativeEvent.locationY); } _onTouchEnd(event){ console.log("touch end:"+event.timeStamp+",Y:"+event.nativeEvent.locationY); } } const styles = StyleSheet.create({ container: { flex: 1,backgroundColor:"#F5FCFF",} }); AppRegistry.registerComponent('ViewProject',() => ViewProject);
在React Native 开发中,通常在最上层的组件中(render 函数靠后渲染的组件)处理触摸事件,但这三个回调函数总能收到事件,而不管用户当前触摸区域是空白的,还是其它组件以及处理了触摸事件。
原文链接:https://www.f2er.com/react/304464.html