Я хочу интегрировать в представление короткого типа в своем приложении, поэтому я использовал ниже библиотеку 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
Когда я запускаю приведенный выше код, он дает мне вывод, как когда япрокрутите вверх в то время, когда первая карта идет сверху, и непрозрачность уменьшается, а следующая карта появляется сверху, но проблема заключается в том, что когда я сильно удару сверху, в первый раз непрозрачность первой карты уменьшается очень быстро, поэтому пользователь заполняет, как обе карты перекрывают друг друга, так что вы можете сказать,мне, как я могу решить эту проблему?все ваши предложения заметны.