react-native从入门到实战系列教程一TouchableOpacity/TouchableHighlight/TouchableWithoutFeedback对比

React Native提供了TouchableOpacity和TouchableHighlight两个组件来创建可点击的按钮。TouchableOpacity支持的是触摸反馈，而TouchableHighlight支持的是高亮反馈。

1. TouchableOpacity

TouchableOpacity是一个允许用户进行触摸操作的组件。当用户触摸到TouchableOpacity的区域时，它会在底层的视图上添加一个透明的透过效果，从而提供视觉反馈。

import React, { Component } from 'react';
import { TouchableOpacity, Text } from 'react-native';
 
export default class MyApp extends Component {
  render() {
    return (
      <TouchableOpacity onPress={() => alert('Touchable Opacity Clicked')}>
        <Text>Touch me!</Text>
      </TouchableOpacity>
    );
  }
}

2. TouchableHighlight

TouchableHighlight与TouchableOpacity类似，但是它在用户触摸时会有一个视觉反馈（高亮）。

import React, { Component } from 'react';
import { TouchableHighlight, Text } from 'react-native';
 
export default class MyApp extends Component {
  render() {
    return (
      <TouchableHighlight 
        onPress={() => alert('Touchable Highlight Clicked')} 
        underlayColor="yellow">
        <Text>Touch me!</Text>
      </TouchableHighlight>
    );
  }
}

3. TouchableNativeFeedback (Android Only)

TouchableNativeFeedback是Android特有的一个组件，它在用户触摸时会有一个视觉和触觉反馈。

import React, { Component } from 'react';
import { TouchableNativeFeedback, Text } from 'react-native';
 
export default class MyApp extends Component {
  render() {
    return (
      <TouchableNativeFeedback 
        onPress={() => alert('Touchable Native Feedback Clicked')} 
        background={TouchableNativeFeedback.SelectableBackground()}>
        <Text>Touch me!</Text>
      </TouchableNativeFeedback>
    );
  }
}

以上就是React Native中关于Touchable的三个组件的简单使用方法。在实际开发中，可以根据需要选择合适的组件。