如何在react-native中创建可翻转的卡片？

Question

具体来说，如何使卡片的一侧在翻转后消失。我使用的是 Android，所以 backfaceVisibility 并没有帮助解决我的问题。我使用 animate 通过不透明度删除对象，但问题是，一旦删除卡片的一侧，“不可见”按钮仍然有效，而卡片当前一侧的按钮则不起作用。我尝试使用 zIndex 并在 Pressable 中“禁用”，但我不确定如何解决这个问题。 我在下面附上了源代码：

  let animatedValue = new Animated.Value(0)
  let val = 0;
  animatedValue.addListener(({ value }) => {
    val = value;
  })
  let frontOpacity = animatedValue.interpolate({ 
    inputRange: [89, 90], 
    outputRange: [1, 0] 
  })
  let backOpacity = animatedValue.interpolate({ 
    inputRange: [89, 90], 
    outputRange: [0, 1] 
  })
  let frontInterpolate = animatedValue.interpolate({
    inputRange: [0, 180],
    outputRange: ['0deg', '180deg']
  })
  let backInterpolate = animatedValue.interpolate({
    inputRange: [0, 180],
    outputRange: ['180deg', '360deg']
  })

  const frontAnimatedStyle = {
    transform: [
      { rotateY: frontInterpolate }
    ], 
    opacity: frontOpacity,
  }
  const backAnimatedStyle = {
    transform: [
      { rotateY: backInterpolate }
    ], 
    opacity: backOpacity,
  }

  let isFront = true;
  const flipCard = () => {
    isFront = !isFront;
    if (val >= 90) {
      Animated.spring(animatedValue, {
        toValue:0, 
        friction: 8,
        tension: 10,
        useNativeDriver: true,
      }).start();
    } else {
    Animated.spring(animatedValue, {
      toValue:180, 
      friction: 8,
      tension: 10,
      useNativeDriver: true,
    }).start();
    }
  }

  const getFrontZ = () => {
    return isFront ? 1 : 0;
  }

  return(
    <View style={styles.container}>
      <Animated.View 
        style={[styles.cardStyle, 
                styles.frontCardStyle, 
                frontAnimatedStyle, 
                {height: cardHeight, zIndex: -1,}]}>
        <Pressable 
          onPress={() => console.log('Open Stack')}
          style={{height: '100%', width: '100%'}}>
          <Pressable 
            onPress={() => flipCard()}
            style={{backgroundColor: 'blue', height: 50, width: 50,}}
          >
          </Pressable>
        </Pressable>
      </Animated.View>
      <Animated.View 
      style={[styles.cardStyle, 
              styles.backCardStyle, 
              backAnimatedStyle, 
              {height: cardHeight, zIndex: 0}]}>
        <Pressable 
          onPress={() => flipCard()}
          style={{height: '100%', width: '100%'}}
          >
        </Pressable>
      </Animated.View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center',
  },
  cardStyle: {
    height: '100%',
    width: '100%',
    backfaceVisibility: 'hidden',
  },
  frontCardStyle: {
    backgroundColor: 'red',
  },
  backCardStyle: {
    backgroundColor: 'purple',
    position: 'absolute',
    top: 0,
  }
})

Answer 1

尝试这个库react-native-card-flip

并将其导入到您的文件中并像这样使用

import CardFlip from 'react-native-card-flip';

<CardFlip style={styles.cardContainer} ref={(card) => this.card = card} >
    <TouchableOpacity style={styles.card} onPress={() => this.card.flip()} > 
        <Text>AB</Text></TouchableOpacity>
    <TouchableOpacity style={styles.card} onPress={() => this.card.flip()} > 
    <Text>CD</Text></TouchableOpacity>
</CardFlip>

Answer 2

它之所以发生是因为你有一个绝对场。要解决这个问题，您需要添加 zIndex 并动态更改它。如果您显示了正面，则 zIndex 应该高于背面的 zIndex。