反应本机甲板滑动故障

Question

我用react-native-deck-swipe库滑动了一下。视图包含图像和文本。当我向左或向右滑动时，会有一种混蛋的感觉。有没有什么办法解决这一问题。我尝试了一些事情，而没有编辑库代码。但这不起作用。混蛋仍然存在。附带所有代码。

App.js

import React, { Component } from 'react'
import Swiper from 'react-native-deck-swiper'
import { Button, StyleSheet, Text, View, Image, Dimensions } from 'react-native'
// import StarRate from '../components/StarRate'
import StarRating from 'react-native-star-rating';

import {cards} from '../../data';

var screenWidth = Dimensions.get('window').width;
var screenHeight = Dimensions.get('window').height;
var swipeImageWidth = (screenWidth/4)*3;

export default class RecipeScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            cards: cards,
            swipedAllCards: false,
            swipeDirection: '',
            isSwipingBack: false,
            cardIndex: 0
        }
    }
    onStarRatingPress(rating) {
        this.setState({
            starCount: rating
        });
    }

    renderCard = (card, index) => {
        return (
            <View style={styles.card}>
                <View style={styles.cardView}>
                    <Image source={card.uri} style={styles.cardImage}></Image>
                    <View style={styles.userDetail}>
                        <View style={styles.posRelative}>
                            <Image source={require('../images/user.png')} style={styles.userPic}></Image>
                            <Text style={styles.userName}>{card.userName}</Text>
                        </View>
                    </View>
                    <View style={styles.varDetail}>
                        <View style={styles.varDetailView}>
                            <View style={styles.flex1}>
                                <Text style={styles.varName}>{card.varName}</Text>
                            </View>
                            <View style={styles.flex1}>
                                <Text style={styles.varData}>{card.varData}</Text>
                            </View>
                        </View>
                        <View style={styles.starRateView}>
                            <View style={styles.starRate}>
                                <StarRating
                                    disabled={true}
                                    maxStars={5}
                                    rating={card.starCount}
                                    fullStarColor={'gold'}
                                    starSize={12}
                                    selectedStar={(rating) => this.onStarRatingPress(rating)}
                                />
                            </View>
                            <View style={styles.flex1}>
                                <Text style={styles.starRateValue}>{card.starCount}</Text>
                            </View>
                        </View>
                        <View style={{paddingBottom: 10}}>
                            <Text>text text</Text>
                            <Text>text text</Text>
                            <Text>text text</Text>
                        </View>
                    </View>
                </View>
            </View>
        )
    };

    onSwipedAllCards = () => {
        this.setState({
            swipedAllCards: true
        })
    };

    swipeBack = () => {
        if (!this.state.isSwipingBack) {
            this.setIsSwipingBack(true, () => {
                this.swiper.swipeBack(() => {
                    this.setIsSwipingBack(false)
                })
            })
        }
    };

    setIsSwipingBack = (isSwipingBack, cb) => {
        this.setState(
            {
                isSwipingBack: isSwipingBack
            },
            cb
        )
    };

    swipeLeft = () => {
        this.swiper.swipeLeft()
    };

    render() {
        return (
            <View style={styles.container}>
                <Image
                    style={{flex:1, height:null, width:null, resizeMode:'cover'}}
                    source={require('../images/background.jpg')}
                    blurRadius={4}
                />
                <View style={styles.overlay}></View>
                <Swiper
                    ref={swiper => {
                        this.swiper = swiper
                    }}
                    backgroundColor={'transparent'}
                    // onSwiped={this.onSwiped}
                    // onTapCard={this.swipeLeft}
                    cards={this.state.cards}
                    cardIndex={this.state.cardIndex}
                    marginBottom={100}
                    marginTop={100}
                    renderCard={this.renderCard}
                    onSwipedAll={this.onSwipedAllCards}
                    stackSize={3}
                    stackSeparation={20}
                    verticalSwipe={false}
                    horizontalThreshold={50}
                    overlayLabels={null}
                    // animateOverlayLabelsOpacity
                    // animateCardOpacity
                >

                    {/* <Button onPress={this.swipeLeft} title='Click to Reset' /> */}
                </Swiper>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "transparent",
    },
    card: {
        backgroundColor: "white"
    },
    cardView: {
        // justifyContent: "center",
        // alignItems: "center",
        paddingHorizontal: 20
    },
    cardImage: {
        height: swipeImageWidth,
        width: null,
        resizeMode: "cover",
        marginTop: -50,
    },
    text: {
        textAlign: "center",
        fontSize: 50,
        backgroundColor: "transparent"
    },
    done: {
        textAlign: "center",
        fontSize: 30,
        color: "white",
        backgroundColor: "transparent"
    },
    overlay: {
        flex: 1,
        position: "absolute",
        left: 0,
        top: 0,
        opacity: 0.4,
        backgroundColor: "black",
        width: screenWidth,
        height: screenHeight
    },
    userDetail: {
        borderBottomWidth: 1,
        borderColor: "#F5F5F5"
    },
    userPic: {
        position: "absolute",
        left: 10,
        top: -30,
        width: 50,
        height: 50,
        borderRadius: 40,
        borderColor: "#fff",
        borderWidth: 2
    },
    userName: {
        textAlign: "left",
        paddingLeft: 70,
        paddingVertical: 3
    },
    posRelative: {
        position: "relative"
    },
    varDetail: {
        paddingHorizontal: 10,
        paddingVertical: 10
    },
    varDetailView: {
        flexDirection: "row"
    },
    flex1: {
        flex: 1
    },
    varName: {
        fontSize: 16,
        color: "red",
        textTransform: "uppercase",
        textAlign: "left",
        paddingBottom: 1
    },
    varData: {
        fontSize: 16,
        color: "green",
        textAlign: "right"
    },
    starRateView: {
        flexDirection: "row",
        paddingBottom: 2
    },
    starRate: {
        textAlign: "left",
        width: 70,
        paddingLeft: 1,
        paddingRight: 5,
        marginTop: 1
    },
    starRateValue: {
        fontSize: 10,
        justifyContent: "flex-end",
    }
})

data.js

const cards=[
    {
        id: '1',
        uri: require('./src/images/1.jpg'),
        userName: 'name1',
        varData: 'type1',
        varName: 'asdasd',
        starCount: 3.5,
    },
    {
        id: '2',
        uri: require('./src/images/2.jpg'),
        username: 'name2',
        varData: 'type20',
        varName: 'asdasd',
        starCount: 4.0,
    }
];