Touchable Opacity

Touchable Opacity 是一个 React Native 中的组件，用于创建一个带有可触摸效果的透明度控件。该组件通常被用于创建按钮或其他可交互的 UI 元素。

用法

使用 Touchable Opacity 组件需要先导入它：

import { TouchableOpacity } from 'react-native';

然后，可以将 TouchableOpacity 放置在 JSX 中，如下所示：

<TouchableOpacity onPress={handlePress}>
  <Text>点击我</Text>
</TouchableOpacity>

在上述代码中，我们创建了一个 TouchableOpacity，当用户点击该组件时，会触发 handlePress 函数。

Props

Touchable Opacity 支持以下 props：

• activeOpacity：当用户激活（按下）按钮时，按钮的不透明度改变。

<TouchableOpacity activeOpacity={0.8}>
  <Text>点击我</Text>
</TouchableOpacity>

• onPress：当用户按下按钮时调用的回调函数。

<TouchableOpacity onPress={handlePress}>
  <Text>点击我</Text>
</TouchableOpacity>

• 可以在 TouchableOpacity 组件中嵌套其他组件，如 Text 或 Image 等。

<TouchableOpacity onPress={handlePress}>
  <Image source={require('./my-image.png')} />
</TouchableOpacity>

示例

下面是一个使用 Touchable Opacity 的示例：

import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff',
    borderRadius: 4,
    borderWidth: 1,
    borderColor: '#ccc',
    paddingVertical: 12,
    paddingHorizontal: 16,
  },
  text: {
    fontSize: 16,
    color: '#007aff',
  },
});

const Button = ({ onPress, title }) => (
  <TouchableOpacity onPress={onPress} style={styles.container}>
    <Text style={styles.text}>{title}</Text>
  </TouchableOpacity>
);

export default Button;

在上述代码中，我们定义了一个名为 Button 的组件，用于创建一个带有可触摸效果的按钮。我们首先导入了 TouchableOpacity 和 Text 组件，并设定了一些样式。然后，在 Button 组件中，我们使用 TouchableOpacity 和 Text 组件创建了一个带有 title prop 的按钮。最后，我们将 Button 组件导出，以便在其他文件中使用。

结论

Touchable Opacity 是 React Native 中创建可触摸透明度控件的重要组件之一。虽然该组件的 API 简单，但它能轻松创建可交互的 UI 元素，可以帮助开发者构建各种应用程序。