Question

I have installed react-native-snap-carousel and I am using it's tinder effect. 
I have added 6 slides as a carousel data. It is perfectly fine for top 3 slides after that it's touch work only slide top right corner. 
I find many other liabrary of carousel but I need to remove card in 1 direction and add the same card in reverse direction in the card stack.

Here is my code: Please help me and here is video which i can achieved by it.

https://www.dropbox.com/s/50t76ordotsuvrf/Animation.mov?dl=0

从'react'导入React，{组件}; 导入{ 视图，文本，StyleSheet，TextInput，TouchableOpacity，图像，平台尺寸图片背景 }来自“ react-native”；从“ styled-components / native”导入样式； //版本可以在package.json中指定从“ react-native-snap-carousel”导入轮播；

here is my data array 


 init() {
        this.state = {
            videos: [
                {
                    id: "WpIAc9by5iU",
                    thumbnail: require('../../img/whitecard.png'),
                    title: "a",
                    slideNumber: "1"

                }, {
                    id: "sNPnbI1arSE",
                    thumbnail: require('../../img/whitecard.png'),
                    title: "the",
                    slideNumber: "2"
                }, {
                    id: "VOgFZfRVaww",
                    thumbnail: require('../../img/whitecard.png'),
                    title: "come",
                    slideNumber: "3"

                },
                {
                    id: "VOgFZfRVawp",
                    thumbnail: require('../../img/whitecard.png'),
                    title: "on",
                    slideNumber: "4"

                },
                {
                    id: "VOgFZfRVawq",
                    thumbnail: `require('./whitecard.png')`,
                    title: "see",
                    slideNumber: "5"

                },
                {
                    id: "VOgFZfRVaw3",
                    thumbnail: require('../../img/whitecard.png'),
                    title: "go",
                    slideNumber: "6"
                },
            ],
        };
    }

我在这里渲染每个项目

_renderItem = ({item, index}) => {
        return (

            <View style={styles.card}>
                <View  activeOpacity={1} onPress={() => {
                    console.log("clicked to index", index)
                    this._carousel.snapToItem(index);
                }}>
                    <CurrentVideoImage source={item.thumbnail} resizeMode={'cover'}>
                        <View>
                        <TouchableOpacity 
                              style={[styles.container,{marginTop:20}]}
                                              onPress={() => this.setState({isView:!this.state.isView})}>
                                <Image source={require('../../../arrownext.png')} style={stylesButton.imageCamera}/>
                            </TouchableOpacity>

                               <Text 
                                style={styles.label}>{item.title}</Text>

                        </View>
                    </CurrentVideoImage>
                </View>

                {/*<NextVideoImage source={{ uri: this.state.currentVideo.nextVideoId }}/>*/}

            </View>
        );
    }

现在是我的轮播代码。

 return(
    <CarouselBackgroundView style={styles.content}>

                    <Carousel
                        ref={(c) => {
                            this._carousel = c;
                        }}
                        data={this.state.videos}
                        renderItem={this._renderItem.bind(this)}
                        onSnapToItem={this.handleSnapToItem.bind(this)}
                        sliderWidth={width}
                        itemWidth={290} //256
                        containerCustomStyle={{ overflow: 'visible' }}
                       contentContainerCustomStyle={{ overflow: 'visible' }}
                        layout={'tinder'}
                        firstItem={0}
                        layoutCardOffset={16} //For showing card deck height.
                    />

                </CarouselBackgroundView>
);

这是我的观点css

 const CurrentVideoImage = styled.ImageBackground`
  width: 290;
  height: 500; 
  border-radius: 20;
`;

    const CarouselBackgroundView = styled.View`
transform: rotate(180deg);
flex-direction: column;
justifyContent: center;
alignItems: center;

  height: 100%;
  width: 100%;
`;

Answer 1

您可以在removeClippedSubviews组件上将prop false设置为Carousel来解决此问题。请注意，您将因此失去所有FlatList的优化-如果您不尝试呈现庞大的数据集，这应该不会成为问题。

有关此问题的更多信息，请参见以下线程：https://github.com/archriss/react-native-snap-carousel/issues/262

反应本地快照旋转木马火种动画不适用于多张挂起的幻灯片

1 个答案: