在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

上一篇下一篇

猜你喜欢

热点阅读