React Native: ошибка при обновлении свойства transform представления, управляемого: RCTView in Android - PullRequest
Новая
       46

React Native: ошибка при обновлении свойства transform представления, управляемого: RCTView in Android

0 голосов
/ 21 февраля 2020

Ищу решение на 2 дня. Но я не мог найти никакого решения. Сейчас я занимаюсь разработкой приложения с React Native. Сначала я проверял Android и IOS одновременно. После этого я допустил ошибку. Я продолжил только с IOS. Через некоторое время я запустил эмулятор Android, затем увидел, что приложение не работает (ошибка прилагается). Я сомневаюсь в анимации, которую я сделал. Я не буду добавлять все коды проекта, чтобы не терять никого время. Я добавил коды анимированных CardFlip. Выдает ошибку, когда только я открыл страницу с анимированным компонентом. Я надеюсь, что кто-то может помочь мне с этим.

enter image description here

Компонент CardFlip 

import React, { ReactNode, useEffect, useState } from 'react';
import { Animated, StyleSheet, ViewStyle, View, TouchableWithoutFeedback } from 'react-native';
import { isAndroid } from 'Utils/Device';
import { Helpers } from 'Theme/index';

interface CardFlipProps {
    condition?: boolean
    children: [ReactNode, ReactNode]
    containerStyle?: ViewStyle|Array<ViewStyle>
}

const CardFlip: React.FunctionComponent<CardFlipProps> = ({ children, condition = true, containerStyle = {} }): JSX.Element => {
    const [flip, setFlip] = useState(false);
    const [rotate] = useState(new Animated.Value(0));

    const startAnimation = ({ toRotate }) => {
        Animated.parallel([
            Animated.spring(rotate, {
                toValue: toRotate,
                friction: 8,
                tension: 1,
            }),
        ]).start();
    };

    useEffect(() => {
        if (flip) {
            startAnimation({ toRotate: 1 });
        } else {
            startAnimation({ toRotate: 0 });
        }
    }, [flip]);

    useEffect(() => {
        if (!condition) {
            setFlip(false);
        }
    }, [condition]);

    const interpolatedFrontRotate = rotate.interpolate({
        inputRange: [0, 1],
        outputRange: ['0deg', '180deg'],
    });

    const interpolatedBackRotate = rotate.interpolate({
        inputRange: [0, 1],
        outputRange: ['180deg', '0deg'],
    });

    const frontOpacity = rotate.interpolate({
        inputRange: [0, 1],
        outputRange: [1, 0.7],
    });

    const backOpacity = rotate.interpolate({
        inputRange: [0, 1],
        outputRange: [0.7, 1],
    });

    const perspective = isAndroid() ? undefined : 1000;

    return (
        <TouchableWithoutFeedback onPress={ () => condition && setFlip(!flip) }>
            <View style={ containerStyle }>
                <Animated.View style={ [
                    style.card,
                    { transform: [{ rotateY: interpolatedFrontRotate }, { perspective }] },
                    { opacity: frontOpacity },
                ] }>
                    { children[0] }
                </Animated.View>
                <Animated.View style={ [
                    style.card,
                    { transform: [{ rotateY: interpolatedBackRotate }, { perspective }] },
                    { opacity: backOpacity },
                ] }>
                    { children[1] }
                </Animated.View>
            </View>
        </TouchableWithoutFeedback>
    );
};

interface Styles {
    card: ViewStyle
}

const style = StyleSheet.create<Styles>({
    card: {
        ...StyleSheet.absoluteFillObject,
        width: '100%',
        height: '100%',
        backfaceVisibility: 'hidden',
        ...Helpers.center,
    },
});

export default CardFlip;

Ответы [ 2 ]

1 голос
/ 02 марта 2020

Просто переместите мой комментарий как ответ на запрос. Кажется, что значение перспективы может быть нулевым или иметь ошибку в Android, поэтому либо его удаление, либо использование его условно должно работать.

0 голосов
/ 01 марта 2020

в строках { transform: [{ rotateY: interpolatedFrontRotate }, { perspective }] }, и { transform: [{ rotateY: interpolatedBackRotate }, { perspective }] },: удаление перспективы или реализация ее как { transform: [{ rotateY: interpolatedFrontRotate }, { perspective: perspective }] }, может решить вашу проблему. Кроме того, вы можете переименовать const perspective, чтобы избежать путаницы.

...