一、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;