Проблема непрозрачности в inshort-интерфейсе с реагированием на натив - PullRequest
0 голосов
/ 08 апреля 2019

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

Когда я запускаю приведенный выше код, он дает мне вывод, как когда япрокрутите вверх в то время, когда первая карта идет сверху, и непрозрачность уменьшается, а следующая карта появляется сверху, но проблема заключается в том, что когда я сильно удару сверху, в первый раз непрозрачность первой карты уменьшается очень быстро, поэтому пользователь заполняет, как обе карты перекрывают друг друга, так что вы можете сказать,мне, как я могу решить эту проблему?все ваши предложения заметны.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...