React Native：更新属性 'transform' 管理的视图时出错：Android 中的 RCTView

Question

我正在使用 React Native 开发一些应用程序。首先，我同时检查了 Android 和 IOS。在那之后，我犯了一个错误。我只继续 IOS。过了一会儿，我在 Android 模拟器中有运行然后我看到应用程序崩溃了（附有错误）。我怀疑动画。我不会添加项目的所有代码，以免浪费任何人的时间。我添加了动画 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

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

Answer 2

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

React Native：更新属性 'transform' 管理的视图时出错：Android 中的 RCTView

React Native: Error while updating property 'transform' of a view managed by: RCTView in Android

animation

android-emulator

react-native

React Native：更新 属性 'transform' 管理的视图时出错：Android 中的 RCTView

React Native: Error while updating property 'transform' of a view managed by: RCTView in Android

animation

android-emulator

react-native

React Native：更新属性 'transform' 管理的视图时出错：Android 中的 RCTView