问题描述
下面的代码是使用Touchable
Transform
渲染一个Animation
按钮。
const { scrollY,headerScrolldistance } = this.state;
const profileImageTranslateX = scrollY.interpolate({
inputRange: [0,headerScrolldistance],outputRange: [0,-(ScreenWidth /2) + 32],extrapolate: 'clamp',});
const profileImageTranslateY = scrollY.interpolate({
inputRange: [0,-11],});
const profileImageScale = scrollY.interpolate({
inputRange: [0,headerScrolldistance / 2,outputRange: [1,0.8,0.6],});
return (
<Animated.View
style={[
Styles.animatedView.profileStyle,{
transform: [
{ translateX: profileImageTranslateX },{ translateY: profileImageTranslateY },{ scale: profileImageScale }
]
}
]}
>
<TouchableOpacity activeOpacity={0.5} onPress={() => this.props.history.push('./profilePhotochanger')}>
<ImageComp profileImageUrl={profileimageurl} imageStyle={Styles.homePageImageStyle} />
</TouchableOpacity>
</Animated.View>
);
随着页面滚动,Animation
应用于可触摸按钮。不应用变换动画时,按钮将按预期工作。但是在应用动画时不起作用。如果页面返回到正常状态(即向后滚动),则按钮将按预期工作。
应用动画后react-native
TouchableOpacity's
不起作用是onPress
的正常行为吗?还是我的代码有问题?
解决方法
如果它适合您,您可以尝试以下选项之一
上有公开讨论1-从“ react-native-gesture-handler”导入{TouchableOpacity};
2-更改包含TouchableOpacity的Animated.View的高度(以 适合TouchableOpacity的大小)
3-通过在TouchableOpacity内部移动