TouchableHighlight

我们建议使用Pressable组件，它更具扩展性且会是官方未来力推的主流。

本组件用于封装视图，使其可以正确响应触摸操作。当按下的时候，封装的视图的不透明度会降低，同时会有一个底层的颜色透过而被用户看到，使得视图变暗或变亮。

在底层实现上，实际会创建一个新的视图到视图层级中，如果使用的方法不正确，有时候会导致一些不希望出现的视觉效果。譬如没有给视图的 backgroundColor 显式声明一个不透明的颜色。

注意TouchableHighlight只支持一个子节点（不能没有子节点也不能多于一个）。如果你希望包含多个子组件，可以用一个 View 来包装它们。

React Native中TouchableHighlight组件用于包裹视图以响应触摸操作，按下时会降低透明度并显示底层颜色（underlayColor），常用于按钮或列表项交互。以下是详细说明：

核心功能

• 触摸反馈：按下时视图变暗（通过activeOpacity控制透明度，需配合underlayColor使用） 。
• 单子节点限制：仅支持一个直接子组件，多个子组件需用View包裹 。

关键属性

• activeOpacity：触摸时透明度（0-1，默认0.85） 。
• underlayColor：触摸时显示的底层颜色（如DDDDDD） 。
• onPress：触摸结束时触发的回调函数 。
• onShowUnderlay/onHideUnderlay：底层颜色显示/隐藏时的回调 。

示例代码

<TouchableHighlight 
  activeOpacity={0.6} 
  underlayColor="DDDDDD" 
  onPress={() => alert('Pressed!')}
>
  <View style={{ backgroundColor: 'fff' }}>
    <Text>My Component</Text>
  </View>
</TouchableHighlight>

注意事项

• 避免透明背景：若未显式设置backgroundColor，可能导致视觉异常 。
• 替代方案：官方推荐使用Pressable组件，因其更灵活且为未来主流 。

真实实际案例演示：

import React, {useState} from 'react';
import {StyleSheet, Text, TouchableHighlight, View} from 'react-native';

const TouchableHighlightExample = () => {
  const [count, setCount] = useState(0);
  const onPress = () => setCount(count + 1);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>计数器应用</Text>
      <Text style={styles.subtitle}>点击按钮增加计数</Text>
      <TouchableHighlight 
        onPress={onPress}
        underlayColor="#CCCCCC"
        style={styles.touchable}
      >
        <View style={styles.button}>
          <Text style={styles.buttonText}>点击这里</Text>
        </View>
      </TouchableHighlight>
      <View style={styles.countContainer}>
        <Text style={styles.countText}>当前计数: {count || 0}</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    paddingHorizontal: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10,
    color: '#333333',
  },
  subtitle: {
    fontSize: 16,
    marginBottom: 20,
    color: '#666666',
  },
  touchable: {
    borderRadius: 8,
    marginBottom: 20,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
    elevation: 5,
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#6200EE',
    padding: 15,
    borderRadius: 8,
    width: 200,
  },
  buttonText: {
    color: '#FFFFFF',
    fontSize: 18,
    fontWeight: 'bold',
  },
  countContainer: {
    alignItems: 'center',
    padding: 20,
  },
  countText: {
    color: '#6200EE',
    fontSize: 20,
    fontWeight: 'bold',
  },
});

export default TouchableHighlightExample;

这段React Native代码实现了一个简单的计数器应用，其核心原理涉及React Hooks状态管理、触摸事件处理和组件化开发模式。

在状态管理方面，代码使用useState Hook来跟踪count状态变量，初始值为0。当用户点击按钮时，onPress回调函数被触发，调用setCount方法更新状态。React Native的渲染机制会在状态变更后重新计算组件树，但只更新发生变化的视图元素，这种优化确保了应用的流畅性。

TouchableHighlight组件的工作原理基于平台原生触摸事件系统。当用户按下时，组件会改变其子视图的不透明度，并显示underlayColor指定的高亮颜色。这种视觉反馈机制通过修改底层UIView(iOS)或View(Android)的alpha属性实现。组件还支持触摸反馈的持续时间控制，确保交互体验的一致性。

样式系统通过StyleSheet.create创建，这些样式在底层会被编译为平台特定的原生样式属性。container使用flex:1实现全屏布局，通过justifyContent和alignItems实现内容的完美居中。touchable样式定义了按钮的圆角边框和阴影效果，这些属性在iOS上映射为CALayer的cornerRadius和shadow属性，在Android上通过elevation属性实现类似效果。

组件化架构使得UI元素能够被封装为独立的可复用单元。View组件作为容器元素，负责布局和分组；Text组件用于显示各种文本内容；TouchableHighlight则处理触摸交互和视觉反馈。

布局设计中，paddingHorizontal控制水平方向的内边距，确保内容不会紧贴屏幕边缘。marginBottom属性在各个元素之间创建适当的间距，形成清晰的视觉层次。

事件处理流程中，当用户触摸屏幕时，原生触摸事件被捕获，通过React Native桥接层转换为JavaScript事件对象，最终触发状态更新和界面重渲染。

这种实现模式展示了React Native开发的核心优势：使用JavaScript和React的声明式编程模型，同时获得原生应用的性能和用户体验。

打包

接下来通过打包命令npn run harmony将reactNative的代码打包成为bundle，这样可以进行在开源鸿蒙OpenHarmony中进行使用。

最后运行效果图如下显示：

欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。