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