ReactNative进阶：React Native 按钮 Touchable 系列组件使用详解_touchablewithoutfeedback

import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, TouchableNativeFeedback, Platform } from 'react-native';
 
export default class TouchableExample extends React.Component {
  _onPressButton() {
    console.log('TouchableOpacity button pressed!');
  }
 
  _onLongPressButton() {
    console.log('TouchableOpacity button long pressed!');
  }
 
  render() {
    return (
      <View style={styles.container}>
        {/* TouchableOpacity 用于带有触摸反馈的按钮 */}
        <TouchableOpacity 
          style={styles.button} 
          onPress={this._onPressButton}
          onLongPress={this._onLongPressButton}
        >
          <Text style={styles.buttonText}>Touch me!</Text>
        </TouchableOpacity>
 
        {/* 如果平台支持，使用 TouchableNativeFeedback 提供更真实的触摸反馈 */}
        {Platform.OS === 'android' && Platform.Version >= 21 ? (
          <TouchableNativeFeedback 
            onPress={this._onPressButton}
            onLongPress={this._onLongPressButton}
          >
            <View style={styles.button}>
              <Text style={styles.buttonText}>Touch me!</Text>
            </View>
          </TouchableNativeFeedback>
        ) : null}
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    padding: 10,
    backgroundColor: 'blue',
    borderRadius: 5,
    alignItems: 'center',
  },
  buttonText: {
    color: 'white',
    padding: 10,
  },
});

这个代码示例展示了如何在React Native中使用TouchableOpacity和TouchableNativeFeedback组件来创建按钮，并处理点击和长按事件。同时，它还展示了如何根据平台版本来决定是否使用TouchableNativeFeedback。