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

来源：互联网发布：mac ifconfig 编辑：程序博客网时间：2024/05/16 11:42

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

0 0