RN 使用Image包裹TouchableNativeFeedback出现的问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 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={()=>{}}/>

效果：