PanGestureHandler немедленно отменяется после setState в React Native - PullRequest
0 голосов
/ 17 апреля 2020

Ребята, я пытаюсь смоделировать профиль 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>
    );
  };

   ..........
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...