Как я могу использовать react-native-redash для перевода Z с помощью react-native-reanimated v2?

У меня есть список карт. Я выбираю подсписок из карточек и преобразую их координаты x и y в другую точку экрана. Я пытаюсь обновить их zIndex, используя общую переменную, которая обновляется в зависимости от того, в каком порядке я их выбираю. Однако это отлично работает на Android, но не на iOS. (Пожалуйста, посмотрите на изображение для наглядности).

Визуальное представление идеального сценария

Это упрощенный код того, что у меня есть.

Это компонент рендеринга.

      <View>
      <TapGestureHandler onGestureEvent={tapGestureEvent}>
        <Animated.View style={[cardStyle]}>
          <Animated.View style={[frontImageStyle]}>
            <Image
              source={require('../../../assets/frontImage.png')}
              style={styles.card}
            />
          </Animated.View>
          <Animated.View style={[backImageStyle]}>
            <Image
              source={require('../../../assets/backImage.png')}
              style={styles.card}
            />
          </Animated.View>
        </Animated.View>
      </TapGestureHandler>
    </View>

Это мой жестTapHander, в котором я обновляю местоположения x и y, а также обновляю индекс для каждой карты на основе общего количества вытянутых карт, это общее количество вытянутых карт является общей переменной и определено в моем родительском компоненте.

      const tapGestureEvent = useAnimatedGestureHandler({
    onStart: (event, context) => {
      context.y = yPosition.value; // It seems I am not even using this.
    },
    onActive: (event, context) => {},
    onEnd: (event, context) => {
      newYPosition.value = someValue
      cardDrawnIndex.value = cardsDrawn.value;
      cardsDrawn.value += 1;
    },
  });

Это стиль, который у меня есть на externalComponent.

      cardDrawnIndex = useSharedVariable(-1);

const cardStyle = useAnimatedStyle(() => {
    return {
      transform: [
        {translateX: someXValue},
        {translateY: someYValue},
        {rotateZ: `${someVariable.value}deg`},
        {rotateY: `${someVariable.value}deg`},
        {translateX: wasToChangeAnchorPointForMyZRotation}, // I don't understand why there is a need to do it and why isn't it as simple as saying, rotate with this anchor point.
        {translateY: wasToChangeAnchorPointForMyZRotation},
      ],
      zIndex: cardDrawnIndex.value,
//      elevation: drawnCardZPosition.value, // Also tried this, it works only for Android, not for iOS.
    };
  });

Я вижу, что в react-native-redash есть утилита transformZ, но я не могу понять, как правильно ее использовать для моего варианта использования. Или, в качестве альтернативы, если я смогу исправить эту проблему с zIndex на iOS (возможно, это должно что-то сделать с созданием новых экземпляров моей карты).

0 ответов

Другие вопросы по тегам