如何在 react-native 中添加 Touchable Ripple？

React Native 是 Facebook 开发的一个框架，用于在一种通用语言 JavaScript 下为 iOS 和 Android 创建原生风格的应用程序。最初，Facebook 只开发了 React Native 来支持 iOS。但是，由于最近支持 Android 操作系统，该库现在可以为这两个平台呈现移动 UI。

方法：在这篇文章中。我们将看到如何在 React Native 中显示 Touchable Ripple。每当用户触摸“按我”文本时，都会产生涟漪效果并显示警报消息。 Touchable Ripple 是应该响应触摸的东西。它通过向用户触摸显示波纹行为来增强应用程序的外观和感觉。为此，我们将使用react-native-paper库。我们将逐步了解该方法。

下面是分步实现：

第 1 步：使用以下命令创建一个 react-native 项目

npx react-native init DemoProject

第 2 步：我们使用 react-native-paper 库来创建涟漪效果，使用以下命令安装 react-native-paper。

npm install react-native-paper

我们可以直接从 react-native-paper 库中使用 TouchableRipple 组件。

第 3 步：在您的项目中创建一个组件文件夹。在组件内，文件夹创建一个文件 RippleEffect.js

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

第 4 步：在RippleEffect.js文件中编写以下代码。

Javascript

import React from "react";
import {View , StyleSheet, Alert} from 'react-native';
import {Text, TouchableRipple } from "react-native-paper";
  
const TouchableRippleEffect = () => {
  
    return(
        
         
        Alert.alert("Welcome to Geeks for Geeks ")}  
                         rippleColor="green">
           Press me
        
        
      )
}
  
export default TouchableRippleEffect ;
  
const styles = StyleSheet.create({
    container :{
         
       paddingTop:"30%",
       paddingLeft:"20%"
    }
})

第 5 步：现在将此文件导入您的App.js

Javascript

import React from 'react';
import type {Node} from 'react';
import { StyleSheet, Text, View} from 'react-native';
import TouchabeRippleEffect from './components/RippleEffect';
  
const App: () => Node = () => {
   
  return (
      
       
           
       
      
  );
};
  
export default App;

运行应用程序的步骤：现在，保存文件并键入以下命令。

npx react-native run-android

输出：

参考文献： https://reactnativepaper.com