react-native - PanGestureHandler 在 React Native 中的 setState 后立即取消
问题描述
伙计们我试图模拟 Instagram 个人资料,react-native-reanimated
通过长按来预览照片,而不是PanGestureHandler
我们可以喜欢这张照片。但是我在这里遇到了困难,当我想长按照片时,我想将当前按下的图像更改为状态,因此弹出窗口将呈现当前按下的照片,但 PanGestureState
立即更改为CANCEL
并结束流。如果我不这样做setState
,所有手势处理程序都运行良好..
请帮助,我是 react-native-reanimated 的新手,人们对此并没有太多分享
这是我渲染单个照片组件的代码...
import { TouchableOpacity, PanGestureHandler, LongPressGestureHandler } from 'react-native-reanimated';
class Instagram extend Component {
...........
renderItem = (photo, index) => {
return (
<TouchableOpacity
key={index}
activeOpacity={0.7}
onPressIn={() => this.setState({currentImage: photo.image})} //when i try to set the state, onGestureEvent on PanGestureHandler immediately canceled
onPress={this.onTapItem}
>
<LongPressGestureHandler
ref={this.longPressRef}
simultaneousHandlers={[this.panGestureRef, this.longPressRef]}
onHandlerStateChange={this.onLongPressStateChange}
>
<Animated.View>
<PanGestureHandler
ref={this.panGestureRef}
simultaneousHandlers={[this.longPressRef, this.scrollRef]}
onGestureEvent={this.onPanGestureHandler}
onHandlerStateChange={e => console.log(e.nativeEvent.state, 'PAN STATE <<<<<<')}
>
<Animated.Image
style={styles.photoItem(index)}
source={{ uri: photo.image }}
/>
</PanGestureHandler>
</Animated.View>
</LongPressGestureHandler>
</TouchableOpacity>
);
};
..........
}
解决方案
推荐阅读
- java - 如何测量本地服务器的响应时间?
- javascript - Javascript使用函数从对象数组中删除属性
- linux - 'nohup 2>&1 >out' vs 'nohup >out 2>&1'
- sql - 列出每本书的副本数
- r - 在 ggplot 中使用 facet_grid 绘制手段
- networkx - 使用网络,如何在有向图中找到第一个节点
- ruby-on-rails - 带有 simple_form gem 的 Hstore 错误消息 - Ruby on Rails
- javascript - 仅在应用过滤器时显示 bootstrap-vue b-table 中的项目
- java - 如何将流发送到另一个对象?
- python - 平均带窗口的新列