React Native：更新由Android RCTView管理的视图的属性“转换”时出错

Question

我正在使用 React Native 开发一些应用程序。 首先，我同时检查 Android 和 IOS。 在那之后，我犯了一个错误。 我继续只用IOS。 过了一会儿，我在 Android Emulator 中运行，然后我看到应用程序崩溃了（附加了错误）。 我怀疑动画。 为了不浪费大家的时间，我不会把项目的所有代码都加进去。 我已经添加了动画 CardFlip 的代码。 只有当我打开具有动画组件的页面时，它才会出现错误。 我希望有人可以帮助我解决这个问题。

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;

Answer 1

只是按照要求移动我的评论作为答案。 似乎透视值可能为空或 Android 中的错误，因此删除它或有条件地使用它应该可以工作。

Answer 2

{ transform: [{ rotateY: interpolatedFrontRotate }, { perspective }] },和{ transform: [{ rotateY: interpolatedBackRotate }, { perspective }] }, : 移除透视或将其实现为{ transform: [{ rotateY: interpolatedFrontRotate }, { perspective: perspective }] },可能会解决你的问题。 此外，您可以重命名const perspective以避免混淆。