在ReactNative使用水波纹效果(仅限android并兼容
2017-08-21 本文已影响0人
农田蚂蚁
1、效果图:
在ReactNative使用水波纹效果(仅限android并兼容到5.0以下版本)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