react native：渲染卡片在用户点击时翻转

Question

我正在编写一个 React Native 代码，该代码使用 map 函数在数组上呈现“卡片”。每张卡片都包裹在一个 touchableOpacity 组件中，因此当用户点击卡片时，它会翻转。目前的问题是，如果用户点击翻转一张卡片，所有相邻的卡片也会翻转。我希望每张卡的翻转功能都是独立的。当一张牌被翻转时，它也不应该触发相邻牌的翻转。提前感谢您阅读本文。

class SavedBooks extends Component {
    componentWillMount() {
        this.animatedValue = new Animated.Value(0);
        this.value = 0;
        this.animatedValue.addListener(({ value }) => { this.value = value })
    }

    frontCardStyle() {
        this.frontInterpolate = this.animatedValue.interpolate({
            inputRange: [0, 180],
            outputRange: ['0deg', '180deg']
        })

        const frontAnimatedStyle = {
            transform: [ { rotateY: this.frontInterpolate }]
        }

        return frontAnimatedStyle
    }

    backCardStyle() {
        this.backInterpolate = this.animatedValue.interpolate({
            inputRange: [0, 180],
            outputRange: ['180deg', '360deg']
        })

        const backAnimatedStyle = { transform: [{ rotateY: this.backInterpolate }] }
        return backAnimatedStyle
    }

    flipCard() {
        if (this.value >= 90) {
            Animated.spring(this.animatedValue, {
                toValue: 0,
                friction: 8,
                tension: 10
            }).start();
        } else if (this.value < 90) {
            Animated.spring(this.animatedValue, {
                toValue: 180,
                friction: 8,
                tension: 10
            }).start();
        }
    }


    renderElemets(color) {
        const { savedBooks } = this.props.book 
        return savedBooks.map((book, index) => {
            return (
            <View
                key={index}
                style={{ alignItems: 'center' }}>

                <TouchableOpacity onPress={() => this.flipCard()} >
                    <Text
                        style={{ fontFamily: 'Helvetica', 
                        fontSize: 25, 
                        padding: 15 }}>
                        {book.title}
                    </Text>
                    <Animated.View>
                        <Animated.Image
                            style={[this.frontCardStyle(), styles.cardStyle]}
                            source={{ uri: book.image }}
                        />
                            <Animated.View style={[this.backCardStyle(), styles.cardStyle, styles.flipCardBack]}>
                            <Text>{book.description}</Text>
                        </Animated.View>
                    </Animated.View>
                </TouchableOpacity>
            </View>
            )
        });
    }

    render() {
        return (
            <ScrollView>
                {this.renderElemets(color)}
            </ScrollView>
            );
        }
}



const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFF',
    },
    imageStyle: {
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
    },
    cardStyle: {
        height: 400,
        width: 250,
        backfaceVisibility: 'hidden',
    },
    flipCardBack: {
        position: "absolute",
        top: 0,
    },
});

Answer 1

因为所有的卡片都有相同的样式。您应该创建一个卡片组件，这样每张卡片都可以有自己的风格，并且新闻事件不会影响其他卡片。

Answer 2

我遇到了这个确切的问题，并通过向数组中单击的项目添加标识符或标签之类的东西来解决它。这个想法与在数组中单击的项目中添加一个“活动”类非常相似，这样您的 flipCard() 函数将仅在标记为活动的项目上运行。简而言之，只需将 frontCardStyle() 或 backCardStyle() 添加到已单击并标记为“活动”的项目。这样只有活动项目会翻转。 我关注了example，并提出了以下解决方案；

constructor(props) {
  super(props);

  this.state = {
    activeItem: {},
  }

  this.toggleActiveItem = this.toggleActiveItem.bind(this);
}

toggleActiveItem(index) {
  this.setState({
    activeItem: {
      [index]: true
    }
  });
  this.flipCard();
}

renderElemets(color) {
        const { savedBooks } = this.props.book 
        return savedBooks.map((book, index) => {
            return (
            <View
                key={index}
                style={{ alignItems: 'center' }}>

                <TouchableOpacity onPress={() => this.toggleActiveItem(index)} >
                    <Text
                        style={{ fontFamily: 'Helvetica', 
                        fontSize: 25, 
                        padding: 15 }}>
                        {book.title}
                    </Text>
                    <Animated.View>
                        <Animated.Image
                            style={[this.state.activeItem[index] && this.frontCardStyle(), styles.cardStyle]}
                            source={{ uri: book.image }}
                        />
                            <Animated.View style={[this.state.activeItem[index] && this.backCardStyle(), styles.cardStyle, styles.flipCardBack]}>
                            <Text>{book.description}</Text>
                        </Animated.View>
                    </Animated.View>
                </TouchableOpacity>
            </View>
            )
        });
    }