javascript - 按下时如何避免TouchableWithoutFeedback降低不透明度

Question

基本上，我有一个 React Native 代码，TouchableWithoutFeedback当我按下它时它会闪烁。我有一个TouchableWithoutFeedback包装 Image 组件。当我pressIn改变状态改变图像的来源。当我pressOut更改恢复原始图像源的状态时。我在这里做错了什么？

我的代码

    import React, { useState } from 'react';
    import {
      StyleSheet,
      Image,
      TouchableWithoutFeedback,
    } from 'react-native';
    import KeyNotes from '../assets/img/keys/';
    import { Container } from './styles';

    export default function Key({ keyName }) {
      const [bg, setBg] = useState(keyName);

      function handlePress() {
        const pressedKeyName = 'KeyNotes["pressed"]';
        setBg(pressedKeyName);
      }

      return (
        <Container>
          <TouchableWithoutFeedback
            style={styles.btn}
            onPressIn={() => handlePress()}
            onPressOut={() => setBg(keyName)}>
            <Image style={styles.image} source={KeyNotes[bg]} />
          </TouchableWithoutFeedback>
        </Container>
      );
    }

    const styles = StyleSheet.create({
      image: {
        flex: 1,
        width: '100%',
        height: null,
        resizeMode: 'contain',
      },
      btn: {
        flex: 1,
        width: '100%',
      },
    });
    enter code here

如何避免闪烁效应？