美文网首页
在ReactNative使用水波纹效果(仅限android并兼容

在ReactNative使用水波纹效果(仅限android并兼容

作者: 农田蚂蚁 | 来源:发表于2017-08-21 10:46 被阅读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

    相关文章

      网友评论

          本文标题:在ReactNative使用水波纹效果(仅限android并兼容

          本文链接:https://www.haomeiwen.com/subject/pgkcdxtx.html