UI短且响应本机的不透明性问题

Question

我想集成到我的应用程序的短类型视图中，所以我在库下面使用 https://github.com/archriss/react-native-snap-carousel

下面是我的代码

return (
        <View style={[styles.exampleContainer, isTinder ? styles.exampleContainerDark : styles.exampleContainerLight]}>                
            <Carousel
              ref={'carousel'}
              //data={isTinder ? this.state.data : ENTRIES1}
              data={this.state.data}
              //renderItem={isTinder ? this._renderLightItem : this._renderItem}
              renderItem={this._renderItem}                
              sliderWidth={sliderWidth}
              itemWidth={itemWidth}                
              itemHeight={screenHeight}
              sliderHeight={screenHeight}
              containerCustomStyle={styles.slider}
              contentContainerCustomStyle={styles.sliderContentContainer}
              layout={type}
              loop={false}
              vertical={true}        

            />
        </View>
    );

和我的动画文件（如下所示，用于上下滑动）负责动画

export function stackAnimatedStyles (index, animatedValue, carouselProps, cardOffset) {
const sizeRef = carouselProps.vertical ? carouselProps.itemHeight : carouselProps.itemWidth;
const translateProp = carouselProps.vertical ? 'translateY' : 'translateX';

const card1Scale = 0.9;
const card2Scale = 0.8;

cardOffset = !cardOffset && cardOffset !== 0 ? 18 : cardOffset;

const getTranslateFromScale = (cardIndex, scale) => {
    const centerFactor = 1 / scale * cardIndex;
    const centeredPosition = -Math.round(sizeRef * centerFactor);
    const edgeAlignment = Math.round((sizeRef - (sizeRef * scale)) / 2);
    const offset = Math.round(cardOffset * Math.abs(cardIndex) / scale);
    const output = IS_ANDROID ?
    centeredPosition - edgeAlignment - offset :
    centeredPosition + edgeAlignment + offset;
    console.log("getTranslateFromScale "+ output);

    return output;


};


return IS_ANDROID ? {
    opacity: animatedValue.interpolate({
        inputRange: [0,1],
        outputRange: [1,0],
        extrapolate: 'clamp',
    }),

    transform: [{
        scale: animatedValue.interpolate({
            inputRange: [-1, 0, 1, 2],
            outputRange: [card1Scale, 1, card1Scale, card2Scale],
            extrapolate: 'clamp'
        })
    }, {
        [translateProp]: animatedValue.interpolate({
            inputRange: [-1, 0, 1, 2, 3],
            outputRange: [
                -sizeRef * 0.5,
                0,
                getTranslateFromScale(1, card1Scale),
                getTranslateFromScale(2, card2Scale),
                getTranslateFromScale(3, card2Scale)
            ],

            extrapolate: 'clamp'
        })
    }]
} : {
    zIndex: carouselProps.data.length - index,
    opacity: animatedValue.interpolate({
        inputRange: [0, 1, 2, 3],
        outputRange: [1, 0.75, 0.5, 0],
        extrapolate: 'clamp'
    }),
    transform: [{
        scale: animatedValue.interpolate({
            inputRange: [-1, 0, 1, 2],
            outputRange: [card1Scale, 1, card1Scale, card2Scale],
            extrapolate: 'clamp'
        })
    }, {
        [translateProp]: animatedValue.interpolate({
            inputRange: [-1, 0, 1, 2, 3],
            outputRange: [
                -sizeRef * 0.5,
                0,
                getTranslateFromScale(1, card1Scale),
                getTranslateFromScale(2, card2Scale),
                getTranslateFromScale(3, card2Scale)
            ],
            extrapolate: 'clamp'
        })
    }]
};

}

我面临以下问题 https://im.ezgif.com/tmp/ezgif-1-c08cf2d7316e.gif

当我运行上面的代码时，它会给我输出，就像当时我向上滚动时，第一张卡的顶部不透明而下一张卡的不透明性下降，但是问题是当我一次滑动顶部时第一张卡的不透明性很快下降，因此用户填充就像两张卡片一样相互重叠，您能告诉我如何解决此问题？您的所有建议都是合理的。