Ребята, я пытаюсь смоделировать профиль Instagram с помощью react-native-reanimated
, чтобы предварительно просмотреть фотографию, нажав ее долго, а затем PanGestureHandler
нам может понравиться фотография. Но у меня есть проблема здесь, когда я хочу долго нажимать на фотографию, я хочу изменить текущее нажатое изображение на состояние, поэтому всплывающее окно будет отображать текущее нажатое фото, но State
PanGesture немедленно изменится на CANCEL
и конец потока. Если я не выполняю setState
, все обработчики жестов работают нормально ..
Пожалуйста, помогите, я новичок в реакции-натив-реанимирован, люди не очень-то об этом рассказывают
Здесь мой код для визуализации одного компонента фотографии ...
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>
);
};
..........
}