react原生快照转盘火绒动画不适用于挂起的多张幻灯片

Question

我已经安装了react-native-snap-carousel，我正在使用它的tinder效果。我添加了6张幻灯片作为转盘数据。它非常适合前3张幻灯片，之后它只在右上角进行触摸工作。我找到了很多其他的转盘库，但我需要在1个方向上移除卡片，并在卡片堆栈中反向添加相同的卡片。

这是我的代码：请帮助我，这是我可以通过它实现的视频。https://www.dropbox.com/s/50t76ordotsuvrf/Animation.mov?dl=0

import React, { Component } from 'react';
import {
View, Text, StyleSheet, TextInput, TouchableOpacity, Image, 
Platform, Dimensions,
ImageBackground
} from 'react-native';
import styled from "styled-components/native"; // Version can be specified in package.json
import Carousel from '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

您可以在Carousel组件上将道具removeClippedSubviews设置为false来解决此问题。请注意，然后您将丢失所有FlatList优化——如果您不尝试渲染一个巨大的数据集，这应该不会成为问题。

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