React-собственный просмотрщик изображений с зумом и swiper

У меня есть массив изображений в Swiper, где я могу прокрутить их, и когда я нажимаю на них, он открывается на модальном (с помощью Lightbox). Но Lightbox не имеет Pinch-to-Zoom или прокрутки.

поэтому я ищу решение для этого. У меня уже есть swiper, но когда я открываю изображение, я хочу все еще иметь возможность прокручивать все изображения (так же, как Facebook, вы можете просмотреть все фотографии или открыть одну и прокрутить их). В дополнение к этому мне нужно уметь Пинч-на-зум.

сейчас это мой код:

(соответствующий код)

      <Swiper
        styles={{flex: 1}}
        height={250}
        renderPagination={this.renderPagination}
        paginationStyle={{
          bottom: -23, left: null, right: 10
        }} loop={false}>
          {this.state.imagens.map((item, index) => {
            return(
              <NetworkImage
                source={{uri: `URL/${item.Ficheiro}`, height:250, width: Dimensions.get('window').width}}>
                <Lightbox navigator={this.props.navigator}>
                  <Image
                    style={{ height: 300 }}
                    source={{ uri: `URL/${item.Ficheiro}` }}
                  />
                </Lightbox>
              </NetworkImage>
            );
          })}
      </Swiper>

Im, используя эту библиотеку для swiper https://github.com/leecade/react-native-swiper и я видел, что у него есть Фотопросмотр, но я не мог заставить его работать.

6
ios javascript react-native

1 ответов

Я пытался реализовать что-то похожее на это.

я использую react-native-image-zoom-viewer для увеличенного режима после нажатия одной из картинок в swiper. В модальном режиме вы можете увеличивать и уменьшать изображение, проводя между изображениями.

https://www.npmjs.com/package/react-native-image-zoom-viewer

я еще не полностью реализовал решение, но, похоже, вы можете просто обернуть компонент ImageViewer в любой модальный, который вы можете открыть/закрыть его программно. 

<Modal visible={this.state.isModalOpened} transparent={true}>
   <ImageViewer imageUrls={images} index={this.state.currentImageIndex}/>
</Modal>

и с модальным где-то сидит на Вашей странице, для Swiper вы можете отобразить над вашими изображениями и вернуть кликабельные изображения следующим образом:

<View style={styles.slide} key={index}>
   <TouchableWithoutFeedback onPress={() => {this.openModal(index)}}>
     <Image
       resizeMode="cover"
       style={styles.image}
       source={{ uri: img.url }}
     />
   </TouchableWithoutFeedback>
</View>

как видно выше, каждое изображение обернуто onPress, который открывает модальный в соответствии с индексом изображения, поэтому он открывает модальный ImageViewer на правой фотографии.

и openModal должен выглядеть примерно так:

function openModal(index) {
   this.setState({isModalOpened: true, currentImageIndex: index })
}

и государство должно быть:

this.state={
  isModalOpened: false,  //Controls if modal is opened or closed
  currentImageIndex: 0   //Controls initial photo to show for modal
}
6