在ReactNative使用水波纹效果(仅限android并兼容到5.0以下版本)

1、效果图：

图片发自简书App

2、接入方式：

npm install react-native-ripple-android --save

react-native link

3、使用介绍：

import RCTRipple from 'react-native-ripple-android';
 
 <RCTRipple style={{ width: 150, height: 40 }}>
     <Button
       title="我是Button"
       color="green"
       onPress={()=>{}} />
 </RCTRipple>
 
 <Ripple 
     style={{
          width: 150,
          height: 40,
          backgroundColor: "red",
          marginTop: 10
        }}
    >
       <Text>我是Text</Text>
  </RCTRipple>
 
/*
增强体验效果
凡是点击水波纹控件“需要跳转页面”的时候，可以延迟执行跳转
页面代码,即等水波纹动画做完了才执行，否则当页面返回的时候
水波纹动画还会在继续或者会发生水波纹一闪而过而看不到效果
**/
 setTimeout(() => {       
    //执行跳转页面的逻辑

 }, 400);

github地址：https://github.com/belong571/ripple

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容