React Native Touchables 组件

在本文中，我们将了解如何在 react-native 中创建 Touchables。为此，我们将使用 Touchable 组件。它用于使任何组件可触摸。

句法：

    // Inside Components        

Touchables 中的组件：

• TouchableHighlight：您可以在任何需要使用按钮或网络链接的地方使用它。当用户按下按钮时，视图的背景将变暗。
• TouchableOpacity：可用于通过降低按钮的不透明度来提供反馈，从而在用户按下时可以看到背景。
• TouchableNativeFeedback：在android中用于显示响应用户触摸的墨水表面反应波纹。
• TouchableWithoutFeedback：如果您需要处理轻击手势但不希望显示任何反馈，请使用TouchableWithoutFeedback 。

现在让我们从实现开始：

• 第 1 步：打开终端并通过以下命令安装 expo-cli。

  npm install -g expo-cli

• 第2步：现在通过以下命令创建一个项目。

  expo init myapp

• 第 3 步：现在进入您的项目文件夹，即 myapp

  cd myapp

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

示例：现在让我们实现 Touchable。在这里，我们将视图创建为可触摸的。

应用程序.js

App.js

import React from 'react';
import { StyleSheet, View , TouchableHighlight , TouchableOpacity , Text , Alert } 
from 'react-native';
export default function App() {
  const pressAlert = (text) => {
    Alert.alert("You " + text +  " me");
  }
  return (
    
         pressAlert("Pressed")} >
            
              Press Me
            
        
         
               pressAlert("Long Pressed")} >
            
              Long Press Me
            
        
    
  );
}
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  view : {
    width:250,
    height:50,
    backgroundColor : "lightgreen",
    alignItems : "center",
    justifyContent : "center",
    borderColor : "black",
    borderWidth : 0.2
  },
  text : {
    fontSize : 20,
    color : "white"
  },
  Touch : {
    marginBottom : 30
  }
});

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

npm run android

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

参考： https://reactnative.dev/docs/handling-touches