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

#1楼 票数:2 已采纳

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

#2楼 票数:0

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

  ask by Halil İbrahim Özdoğan translate from so

未解决问题?本站智能推荐:

2回复

更新由以下人员管理的视图的属性“nativeBackgroundAndroid”时出错:RCTView

React 本机应用程序因以下错误而崩溃。 我不太明白这个错误。 知道这个错误是关于什么的吗? 我正在使用 React Native 0.31,但在设备 Galaxy Core2 的 Android 4.4 中出现此错误
1回复

更新由以下人员管理的视图的属性“accessibilityRole”时出错:RCTView

嗨,我收到以下错误。 肺纤维化 更新由以下人员管理的视图的属性“accessibilityRole”时出错:RCTView null 无效的辅助角色值:选项卡 反应本机环境信息: 系统:
1回复

运行本地应用程序时出错

我在Windows中的react native android中运行我的第一个应用程序时正在安装react native。 我出错了 无法确定任务':app:preDebugBuild'的依赖关系。 >无法解决配置':app:debugRuntimeClasspath'的所有任务
3回复

react-native刷新android屏幕错误

反应本机新手。 使用“ react-native init projectName”创建了一个新项目 设置Android Studio和模拟器​​后,对index.js文件进行更改以显示文本。 使用“ react-native run-android”运行应用程序后,模拟器会正
2回复

使用 react native 在 android 中运行构建时出错

信息 正在启动模拟器... 错误 无法启动模拟器。 原因:找不到模拟器作为 emulator -list-avds 的输出。 错误
2回复

反应本机运行android中的错误

我正在尝试在模拟器上运行我的应用程序,但是它会挂在哪里,而其他人却没有问题呢? http://uupload.ir/files/w7jt_hang.png 几分钟后,这种情况就会发生http://uupload.ir/files/x5pw_v.jpg
1回复

React Native Node.js Android Studio模拟器错误

通过模拟器上的ndroid Studio运行我的本机应用程序时,我一直收到此错误 重新加载页面后,这就是显示的内容
1回复

Android模拟器中的React-Native可运行错误

当我尝试在Android Emulator上运行React-Native App时,我毫无例外地开始收到此奇怪的错误。 我已经尝试过许多事情,包括通过AVD Manager进行“擦除数据”和“冷启动”,Android Studio中的Rebuild Project和Clean Project,但没有