版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_37695006/article/details/82663186
本组件用于封装视图,使其可以正确响应触摸操作(仅限Android平台)。在Android设备上,这个组件利用原生状态来渲染触摸的反馈。
目前它只支持一个单独的View实例作为子节点。在底层实现上,实际会创建一个新的RCTView节点替换当前的子View,并附带一些额外的属性
官网例子:
renderButton: function() {
return (
<TouchableNativeFeedback
onPress={this._onPressButton}
background={TouchableNativeFeedback.SelectableBackground()}>
<View style={{width: 150, height: 100, backgroundColor: 'red'}}>
<Text style={{margin: 30}}>Button</Text>
</View>
</TouchableNativeFeedback>
);
},
看着没毛病,但是如果image外面包裹TouchableNativeFeedback就出现反馈的动画效果在被图片遮挡的情况,很难受!尝试了好几种办法,最终找到解决方案,不多说,直接上代码~
import React, { Component } from 'react';
import { View, Text, StyleSheet, Animated, Easing, Image, TouchableNativeFeedback } from 'react-native';
class MFImage extends Component {
render() {
const {
style = {},
resizeMode = "cover",
source = "",
onPress = ()=>{},
touchBgColor = "rgba(255,255,255,.4)"
} = this.props;
let size = {
width: style.width,
height: style.height,
}
return (
<View style={style}>
<Image
style={{
resizeMode: resizeMode,
position: "absolute",
top: 0,
left: 0,
...size
}}
source={source}
/>
<TouchableNativeFeedback
onPress={onPress}
background={TouchableNativeFeedback.Ripple(touchBgColor)}
>
<View style={{
position: "absolute",
top: 0,
left: 0,
...size
}}/>
</TouchableNativeFeedback>
</View>
)
}
}
export default MFImage;
这个是我简单的封装了下,使用如下:
<MFImage style={样式} touchBgColor={反馈的背景色} source={图片链接} onPress={()=>{}}/>
效果: