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

最新推荐文章于 2024-12-03 10:19:15 发布

GarenWang

最新推荐文章于 2024-12-03 10:19:15 发布

阅读量509

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 reactnative 移动端

本文链接：https://blog.youkuaiyun.com/weixin_37695006/article/details/82663186

前端同时被 3 个专栏收录

24 篇文章

订阅专栏

reactnative

7 篇文章

订阅专栏

移动端

7 篇文章

订阅专栏

本文介绍了一个简单的封装组件MFImage，用于解决Android设备上图片外部包裹TouchableNativeFeedback时出现的动画效果问题。通过提供自定义参数如样式、触摸背景颜色和图片链接，实现更灵活的触摸反馈控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本组件用于封装视图，使其可以正确响应触摸操作（仅限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={()=>{}}/>

效果：