React native 应用变换动画时,TouchableOpacity不起作用
下面的代码是使用React native 应用变换动画时,TouchableOpacity不起作用,react-native,animation,transform,touchableopacity,React Native,Animation,Transform,Touchableopacity,下面的代码是使用变换动画来渲染可触摸的按钮 const { scrollY, headerScrollDistance } = this.state; const profileImageTranslateX = scrollY.interpolate({ inputRange: [0, headerScrollDistance], outputRange: [0, -(ScreenWidth /2) + 32], extrapo
变换动画来渲染可触摸的按钮
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, headerScrollDistance],
outputRange: [0, -11],
extrapolate: 'clamp',
});
const profileImageScale = scrollY.interpolate({
inputRange: [0, headerScrollDistance / 2, headerScrollDistance],
outputRange: [1, 0.8, 0.6],
extrapolate: 'clamp',
});
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>
);
const{scrollY,headerscrolldance}=this.state;
const profileImageTranslateX=scrollY.interpolate({
输入范围:[0,headerScrollDistance],
输出范围:[0,-(屏幕宽度/2)+32],
外推:“夹具”,
});
const profileImageTranslateY=scrollY.interpolate({
输入范围:[0,headerScrollDistance],
输出范围:[0,-11],
外推:“夹具”,
});
const profileImageScale=scrollY.interpolate({
输入范围:[0,headerScrollDistance/2,headerScrollDistance],
输出范围:[1,0.8,0.6],
外推:“夹具”,
});
返回(
this.props.history.push('./profilePhotoChanger')}>
);
当页面滚动时,动画
应用于可触摸按钮。未应用变换动画时,按钮按预期工作。但在应用动画时不工作。若页面恢复到正常状态(即向后滚动),则按钮按预期工作
应用动画时,react native
中的TouchableOpacity
onPress
不起作用,这是正常行为吗?或者我的代码有问题吗?如果对您有效,您可以尝试以下选项之一
1-从“反应本机手势处理程序”导入{TouchableOpacity}
2-将包含TouchableOpacity的动画视图的高度更改为
触摸屏的适配尺寸(不透明度)
3-通过移动