react native 中的 TouchableHighlight 是什么？

TouchableHighlight 是一个组件，用于为视图提供一个包装器，以使它们正确响应基于触摸的输入。按下时，TouchableHighlight 组件的不透明度会降低，这允许底层视图或其他组件的样式被突出显示。

该组件必须只有一个子组件。如果有多个子组件，则将它们包装在 View 组件中。 TouchableHighlight 必须有一个子组件。

句法：


    // Child Component

TouchableHighlight 道具：

onPress：用于指定释放触摸时调用的函数。
disabled：如果其值为 true，则禁用所有交互。默认值为“假”。
style：用于指定 TouchableHighlight 组件的样式
activeOpacity：用于指定触摸活动时被包裹的View的不透明度值。它的取值介于 0 和 1 之间，默认值为 0.85。
underlayColor：用于指定触摸活动时显示的底层颜色。

现在让我们从实现开始：

第 1 步：打开终端并通过以下命令安装 expo-cli。
```
npm install -g expo-cli
```
第2步：现在通过以下命令创建一个项目。
```
expo init TouchableHighlightDemo
```
第 3 步：现在进入您的项目文件夹，即 TouchableHighlightDemo
```
cd TouchableHighlightDemo
```

项目结构：它将如下所示：

示例：现在让我们实现 TouchableHighlight。在下面的示例中，我们有一个按钮，当用户单击它时，将演示 TouchableHighlight 功能。

App.js

import React from 'react';
import { StyleSheet,
         Text, 
         View, 
         TouchableHighlight, 
         Alert } from 'react-native';
  
export default function App() {
  return (
    
  
       {
        Alert.alert("Touchable Highlight pressed.");
      }}
        style={styles.touchable}
        activeOpacity={0.5}
        underlayColor="#67c904"
      >
        Click Me!
      
    
  );
}
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  touchable: {
    height: 50,
    width: 200,
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#4287f5'
  },
  text: {
    color: "#fff"
  }
});

使用以下命令启动服务器。

npm run android

输出：如果你的模拟器没有自动打开，那么你需要手动打开。首先，去你的安卓工作室并运行模拟器。现在再次启动服务器。

参考： https://reactnative.dev/docs/touchablehighlight