Как я могу использовать 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 (возможно, это должно что-то сделать с созданием новых экземпляров моей карты).