React Native Touchable(按钮) onPress 事件系列总结

一、ToushableHighlight                       TouchableOpacity 透明按钮 点击 后
从透明 到不透明

点击后改变颜色 和 透明度 

背景的透明度可能 会 影响 文字 

import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
TouchableHighlight,
TouchableNativeFeedback,
TouchableWithoutFeedback,

} from 'react-native';

class TouchablesDemo extends Component {
onPressCallback = () => {
alert('点击了按钮');
};
onLongPress() {
alert('长点击');
};

onPressIn () {
alert('按下');
}

onPressOut () {
alert('抬起')
}
render() {
return (
<View style={styles.container}>

<TouchableHighlight
style={styles.touchables}
underlayColor = '#f00'
activeOpacity={0.7}
onPressIn = {this.onPressIn}
onPressOut={this.onPressOut}
onLongPress={this.onLongPress}

onPress={this.onPressCallback}
>
<Text style={styles.touchablesText}>TouchableHighlight</Text>
</TouchableHighlight>

<TouchableOpacity
style={styles.touchables}
onPress={this.onPressCallback}
>
<Text style={styles.touchablesText}>TouchableOpacity</Text>
</TouchableOpacity>

<TouchableNativeFeedback
onPress={this.onPressCallback}
background={TouchableNativeFeedback.SelectableBackground()}
>
<View style={styles.touchables}>
<Text style={styles.touchablesText}>TouchableNativeFeedback</Text>
</View>
</TouchableNativeFeedback>

<TouchableWithoutFeedback
onPress={this.onPressCallback}
background={TouchableNativeFeedback.SelectableBackground()}
>
<View style={styles.touchables}>
<Text style={styles.touchablesText}>TouchableNativeFeedback</Text>
</View>
</TouchableWithoutFeedback>

</View>
);
}
}

const styles = StyleSheet.create({
touchablesText: {
color: 'white',
fontSize: 20,
textAlign: 'center',
},
touchables: {
margin: 10,
backgroundColor: 'blue',
width: 250,
height: 50,
borderRadius: 20,
justifyContent: 'center',
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});

module.exports = TouchablesDemo;