我正在寻找2天的解决方案。但是我找不到任何解决方案。现在,我正在使用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;