TouchableOpacity

If you’re looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API.

本组件用于封装视图，使其可以正确响应触摸操作。当按下的时候，封装的视图的不透明度会降低。

不透明度的变化是通过把子元素封装在一个Animated.View中来实现的，这个动画视图会被添加到视图层级中，少数情况下有可能会影响到布局。（译注：此组件与 TouchableHighlight 的区别在于并没有额外的颜色变化，更适于一般场景。）

TouchableOpacity是React Native中用于处理触摸事件的组件，主要功能是通过降低透明度提供视觉反馈。以下是详细说明：

基本用法

<TouchableOpacity style={Styles.button}>
  <Text style={Styles.text}>确定</Text>
</TouchableOpacity>

• style：定义按钮样式，通常包含背景色和尺寸。
• 子组件：可嵌套Text、Image等任意组件。

核心属性

• onPress：点击事件回调，支持匿名函数或自定义方法。

  onPress={() => alert('点击')} // 匿名函数
  onPress={this.customAlert} // 自定义方法
  

• activeOpacity：按下时的透明度（默认0.2），值范围0-1。

  <TouchableOpacity activeOpacity={0.5} />
  

状态维护
通过this.state控制按钮可用性：

constructor(props) {
  super(props);
  this.state = { disable: false };
}

• disable：禁用按钮时设置disabled={this.state.disable}并修改背景色。
• enable/disable：通过setState切换状态。

与其他组件对比

• TouchableHighlight：按下时背景变暗（默认activeOpacity=0.85）。
• TouchableNativeFeedback：仅限Android，支持涟漪效果。
• TouchableWithoutFeedback：无视觉反馈，不推荐用于按钮。

---

真实实例场景演示：

这段React Native代码实现了一个基础的计数器应用，其核心原理涉及React Hooks状态管理、组件化架构和跨平台渲染机制。

状态管理使用useState Hook来维护count变量的状态，初始值为0。当用户点击按钮时，onPress回调函数被触发，这里使用了函数式更新（prevCount => prevCount + 1）而不是直接依赖当前状态值。这种模式在异步更新场景下尤为重要，因为它能确保获取到最新的状态值。

import React, { useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";

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

  return (
    <View style={styles.container}>
      <Text style={styles.title}>计数器应用</Text>
      <Text style={styles.subtitle}>点击按钮增加计数</Text>
      <View style={styles.countContainer}>
        <Text style={styles.countText}>当前计数: {count}</Text>
      </View>
      <TouchableOpacity
        style={styles.button}
        onPress={onPress}
        activeOpacity={0.7}
      >
        <Text style={styles.buttonText}>点击增加</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f0f8ff",
    paddingHorizontal: 20
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    marginBottom: 10,
    color: "#333"
  },
  subtitle: {
    fontSize: 16,
    marginBottom: 20,
    color: "#666"
  },
  button: {
    alignItems: "center",
    backgroundColor: "#4CAF50",
    padding: 15,
    borderRadius: 8,
    width: "80%",
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
    elevation: 5
  },
  buttonText: {
    color: "white",
    fontSize: 18,
    fontWeight: "bold"
  },
  countContainer: {
    alignItems: "center",
    marginBottom: 30
  },
  countText: {
    fontSize: 20,
    color: "#333"
  }
});

export default App;

TouchableOpacity组件的工作原理基于平台原生的触摸事件系统。当用户按下时，组件会通过修改其子视图的alpha值来产生视觉反馈效果。activeOpacity={0.7}属性进一步自定义了按压时的不透明度，从默认的0.2调整为0.7，提供了更明显的视觉变化。

组件架构采用声明式编程模型，UI的呈现完全由当前状态决定。当count状态发生变化时，整个函数组件会重新执行，但React Native的协调器会智能地只更新发生变化的部分，而不是重新渲染整个界面。

样式系统通过StyleSheet.create创建，这些样式在底层会被编译为平台特定的原生样式属性。container使用flex:1实现全屏布局，通过justifyContent和alignItems实现内容的完美居中。paddingHorizontal控制水平方向的内边距，确保内容不会紧贴屏幕边缘。

布局设计中，marginBottom在各个元素之间创建适当的间距，形成清晰的视觉层次。width: "80%"使按钮宽度占据父容器的80%，既保证了可点击区域，又保持了视觉平衡。

渲染机制方面，React Native使用虚拟DOM来优化性能。当状态变更时，React会先生成一个新的虚拟DOM树，然后与旧的虚拟DOM树进行比较，计算出需要更新的最小视图集合，最后通过桥接层将这些更新指令发送到原生端。

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

这种实现模式展示了React Native开发的核心优势：使用JavaScript和React的声明式编程模型，同时获得原生应用的性能和用户体验。组件的重新渲染过程是高效的，因为React Native实现了增量更新策略，只将必要的变更应用到原生视图上。

代码结构体现了React函数式组件的开发模式，将UI逻辑与状态管理清晰分离。每个组件都有独立的状态管理逻辑，确保了组件间的状态隔离和独立更新。

---

打包

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

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

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