native react 变颜色 点击_react-native中的触摸事件

移动应用上的用户交互基本靠“摸”。当然，“摸”也是有各种姿势的：在一个按钮上点击，在一个列表上滑动，

或是在一个地图上缩放。React Native 提供了可以处理常见触摸手势(例如点击或滑动)的组件， 以及可用于识别更复杂的手势的完整的手势响应系统。

再试试下面这个使用Button的例子吧。你可以点击"Tap to Play"来预览真实效果。

(下面会显示一个嵌在网页中的手机模拟器，国内用户可能打不开这个网页模拟器，或速度非常慢)。

import React, { Component } from 'react';

import { Alert, AppRegistry, Button, StyleSheet, View } from 'react-native';

export default class ButtonBasics extends Component {

_onPressButton() {

Alert.alert('You tapped the button!')

}

render() {

return (

onPress={this._onPressButton}

title="Press Me"

/>

onPress={this._onPressButton}

title="Press Me"

color="#841584"

/>

onPress={this._onPressButton}

title="This looks great!"

/>

onPress={this._onPressButton}

title="OK!"

color="#841584"

/>

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

},

buttonContainer: {

margin: 20

},

alternativeLayoutButtonContainer: {

margin: 20,

flexDirection: 'row',

justifyContent: 'space-between'

}

})

// skip this line if using Create React Native App

AppRegistry.registerComponent('AwesomeProject', () => ButtonBasics);

如果你想在处理点击事件的同时不显示任何视觉反馈，则需要使用TouchableWithoutFeedback。

某些场景中你可能需要检测用户是否进行了长按操作。可以在上面列出的任意组件中使用onLongPress属性来实现

import React, { Component } from 'react';

import { Alert, AppRegistry, Platform, StyleSheet, Text, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback, View } from 'react-native';

export default class Touchables extends Component {

_onPressButton() {

Alert.alert('You tapped the button!')

}

_onLongPressButton() {

Alert.alert('You long-pressed the button!')

}

render() {

return (

TouchableHighlight

TouchableOpacity

onPress={this._onPressButton}

background={Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() : ''}>

TouchableNativeFeedback

onPress={this._onPressButton}

>

TouchableWithoutFeedback

Touchable with Long Press

);

}

}

const styles = StyleSheet.create({

container: {

paddingTop: 60,

alignItems: 'center'

},

button: {

marginBottom: 30,

width: 260,

alignItems: 'center',

backgroundColor: '#2196F3'

},

buttonText: {

padding: 20,

color: 'white'

}

})

具体使用哪种组件，取决于你希望给用户什么样的视觉反馈：

一般来说，你可以使用TouchableHighlight来制作按钮或者链接。注意此组件的背景会在用户手指按下时变暗。

在 Android 上还可以使用TouchableNativeFeedback，它会在用户手指按下时形成类似墨水涟漪的视觉效果。

TouchableOpacity会在用户手指按下时降低按钮的透明度，而不会改变背景的颜色。

如果你想在处理点击事件的同时不显示任何视觉反馈，则需要使用TouchableWithoutFeedback。

某些场景中你可能需要检测用户是否进行了长按操作。可以在上面列出的任意组件中使用onLongPress属性来实现。