React native 反应本机：更新属性时出错'；转换'；Android中由：RCTView管理的视图的

我正在用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;

import React，{ReactNode，useffect，useState}来自'React'；
从“react native”导入{动画、样式表、ViewStyle、View、TouchableWithoutFeedback}；
从“Utils/Device”导入{isAndroid}；
从“主题/索引”导入{Helpers}；
接口cardrops{
条件？：布尔值
子项：[反应节点，反应节点]
容器样式？：视图样式|数组
}
const CardFlip:React.FunctionComponent=（{children，condition=true，containerStyle={}}）：JSX.Element=>{
const[flip，setFlip]=useState（false）；
const[rotate]=useState（新的动画值（0））；
常数startAnimation=（{toRotate}）=>{
平行动画([
动画。弹簧（旋转{
toValue:toRotate，
摩擦：8，
紧张局势：1，
}),
]).start（）；
};
useffect（（）=>{
如果（翻转）{
startAnimation（{toRotate:1}）；
}否则{
startAnimation（{toRotate:0}）；
}
}，[flip]）；
useffect（（）=>{
如果（！条件）{
setFlip（假）；
}
}，[条件]；
const interpolatedFrontRotate=rotate.interpolate({
输入范围：[0，1]，
输出范围：['0deg'，'180deg']，
});
const interpolatedBackRotate=rotate.interpolate({
输入范围：[0，1]，
输出范围：['180deg'，'0deg']，
});
const frontOpacity=rotate.interpolate({
输入范围：[0，1]，
输出范围：[1,0.7]，
});
const backOpacity=rotate.interpolate({
输入范围：[0，1]，
输出范围：[0.7,1]，
});
const perspective=isAndroid（）？未定义：1000；
返回(
条件&&setFlip（！flip）}>
{children[0]}
{儿童[1]}
);
};
界面样式{
卡片：视图样式
}
const style=StyleSheet.create({
卡片：{
…StyleSheet.absoluteFillObject，
宽度：“100%”，
高度：“100%”，
背面可见性：“隐藏”，
…助手中心，
},
});
导出默认卡片翻转；

在行中

{transform:[{rotateY:interpolatedFrontRotate}，{perspective}]}，

和

{transform:[{rotateY:interpolatedBackRotate}，{perspective}]}，

：删除透视图或将其实现为

{transform:[{rotateY:interpolatedFrontRotate}，{perspective:perspective}}，

可能会解决您的问题。此外，您还可以重命名常量透视图以避免混淆。

行中的

{transform:[{rotateY:interpolatedFrontRotate}，{perspective}]}，

和

---

{transform:[{rotateY:interpolatedBackRotate}，{perspective}]}，

：删除透视图或将其实现为

{transform:[{rotateY:interpolatedFrontRotate}，{perspective:perspective}}，

可能会解决您的问题。此外，您可以重命名

常量透视图

，以避免混淆。

只需根据请求将我的注释作为答案移动即可。在Android中，透视值可能为null或是一个bug，因此删除透视值或有条件地使用透视值都应该有效

只是根据要求移动我的评论作为回答。在Android中，透视值可能为null或是一个bug，因此删除透视值或有条件地使用透视值都应该有效

如果删除转换中的perspective属性会发生什么？@sfratini实际上我应该已经尝试过了：）。非常感谢你，它成功了。你应该加上答案。因此，我认为这是正确的答案。当我在做翻转动画时，我回顾了下面的代码。并且，我从下面的代码中获得了这个观点。无论如何，谢谢。我希望答案能帮助那些面临同样问题的人。谢谢我只是将其作为答案发布。如果删除转换中的perspective属性会怎么样？@sfratini实际上我应该已经尝试过了：）。非常感谢你，它成功了。你应该加上答案。因此，我认为这是正确的答案。当我在做翻转动画时，我回顾了下面的代码。并且，我从下面的代码中获得了这个观点。无论如何，谢谢。我希望答案能帮助那些面临同样问题的人。谢谢谢谢你的回答，我已经试过你的解决方案了。不幸的是，它没有像我们预期的那样工作。我批准了您可以在上面看到的正确答案。谢谢您的回答，我已经尝试了您的解决方案。不幸的是，它没有像我们预期的那样工作。我同意你在上面看到的正确答案，我同意。至少，它应该抛出一个指向透视图的错误。谢谢你的回答，我同意。至少，它应该抛出一个指向透视图的错误。谢谢你的回答。