我对 RN 有点陌生,我很难追踪“超出最大堆栈调用”。我知道该错误与我的代码中发生的某种无限循环有关,但我找不到它。
代码
事件屏幕:
import Animated, { interpolate, Extrapolate, Value } from "react-native-reanimated";
export default class EventScreen extends React.Component<EventScreenProps, EventScreenState> {
render() {
const animatedValueRef = new Value(0);
const height = interpolate(animatedValueRef, {
inputRange: [-MAX_HEADER_HEIGHT, 0],
outputRange: [0, MAX_HEADER_HEIGHT],
extrapolate: Extrapolate.CLAMP
});
return (
<SafeAreaView style={style.screenContainer}>
<CollapsibleHeaderBar backgroundImage={event?.flyer} animatedValueRef={animatedValueRef} >
<TouchableOpacity style={style.shareButton}>
<Icon2 name="ios-share-alt" size={24} style={style.shareButtonIcon} />
<Text style={style.shareButtonText}>CONDIVIDI</Text>
</TouchableOpacity>
</CollapsibleHeaderBar>
<Animated.ScrollView
style={style.flexOne}
onScroll={onScroll({ y: animatedValueRef })}
showsVerticalScrollIndicator={false}
scrollEventThrottle={1}>
<View style={style.cover}>
<Animated.View style={[style.gradient, { height }]} />
<LinearGradient style={style.flexOne} colors={["transparent", "rgba(0, 0, 0, 0.2)", Colors.appBackgroundColorValue]} />
</View>
...
</Animated.ScrollView>
...
</SafeAreaView>
)
}
}
可折叠标题栏:
import { interpolate, Extrapolate, color } from "react-native-reanimated";
export default class CollapsibleHeaderBar extends React.PureComponent<CollapsibleHeaderBarProps> {
render() {
const { backgroundImage, collapsedText, animatedValueRef } = this.props;
const opacity = interpolate(animatedValueRef, {
inputRange: [-50, 0, HEADER_DELTA + 60],
outputRange: [0, 0, 1],
extrapolate: Extrapolate.CLAMP,
});
const textOpacity = interpolate(animatedValueRef, {
inputRange: [HEADER_DELTA - 30, HEADER_DELTA],
outputRange: [0, 1],
extrapolate: Extrapolate.CLAMP,
});
const backgroundColor = color(18, 18, 18, interpolate(animatedValueRef, {
inputRange: [MIN_HEADER_HEIGHT, HEADER_DELTA - 30],
outputRange: [0.3, 1],
extrapolate: Extrapolate.CLAMP,
}));
const borderBottomColor = color(65, 65, 65, interpolate(animatedValueRef, {
inputRange: [MIN_HEADER_HEIGHT, HEADER_DELTA - 30],
outputRange: [0.3, 1],
extrapolate: Extrapolate.CLAMP,
}));
return (
<View>
<Animated.View style={style.headerContainer}>
<Image style={style.backgroundImage} source={{ uri: backgroundImage }} />
<Animated.View style={[style.barOverlay, { opacity }]} />
</Animated.View>
<Animated.View style={[style.barAnimation, { backgroundColor, borderBottomColor }]}>
<View style={style.barContainer}>
<TouchableOpacity onPress={this._onBackPressed}>
<Icon name="chevron-left" size={24} style={style.goBackIcon} />
</TouchableOpacity>
<Animated.Text style={{ opacity: textOpacity }}>{collapsedText}</Animated.Text>
</View>
{this.props.children}
</Animated.View>
</View>
);
}
}
错误
到目前为止我所理解的内容
- 该错误似乎与我将一个react-native-reanimated值从EventScreen传递到CollapsibleHeaderBar有关
- react-native-reanimated Value 本身就可以工作,因为它在 EventScreen 上使用(请参阅高度插值)
- 问题似乎也与 CollapsibleHeaderBar 上的插值有关
- 从 EventScreen 中注释掉 CollapsibleHeaderBar 即可解决问题
- 用 CollapsibleHeaderBar 中的插值组件注释掉样式也可以解决问题
- 代码显然在 CollapsibleHeaderBar 的渲染阶段后停止工作
- 我见过这种跨组件动画的其他示例,所以理论上它应该是可能的
- onScroll 事件永远不会被触发(显然错误发生在之前)
- 每个渲染函数仅调用一次,因此不存在循环
感谢您的帮助。
最佳答案
我已经解决了这个问题。我在 CollapsibleHeaderBar 上导入的动画不是来自同一个库(重新动画),而是来自react-native。改变它就解决了。
我还了解到,您必须将动画值放入状态中,否则动画将无法正常工作。
关于react-native - React Native 插值超出最大调用堆栈大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61432859/