React-Native横向浏览相册（带大图浏览）

最新推荐文章于 2026-05-24 13:30:59 发布

原创

最新推荐文章于 2026-05-24 13:30:59 发布 · 置顶 · 2.5k 阅读

标签

#横向滑动相册 #大图浏览 #React-Native自定义控件 #带数字显示当前页码

本文介绍了如何使用React-Native构建一个带有大图浏览功能的横向滑动相册，通过结合横向ListView和ViewPager实现，同时展示了如何在页面中显示当前页码。

1.废话少说，先上效果。

2.效果实现思路

横向的listView+viewPager(android很好实现，react-native也差不多）

3.贴源码

用法：

大图浏览的控件代码：

import React, {
 
 Component} from 'react';
import {
   BackAndroid,
   View,
   Platform,
} from 'react-native';
var data =[];
var currentPosition =0;

import ImageViewer from 'react-native-image-zoom-viewer';

var images = [];

export default class GalleryView extends Component {

   constructor(props) {
      super(props);
      images =[];
      data =this.props.data;

      currentPosition=this.props.p

      var count = data.length;
      if(count>9){
         count = 9;
      }
    for(var i=0 ;i<count;i++){
         var imageInfo = data[i];
      var urlobject=new Object;
      urlobject.url = imageInfo['path'];
    if( imageInfo['width'] !=null &&  imageInfo['width'] != '' ){
           urlobject.width = imageInfo['width'];
      }
    if( imageInfo['height'] !=null &&  imageInfo['height'] != '' ){
            urlobject.height = imageInfo['height'];
      }
      images.push(urlobject);
    }
      this.state={
        dataSourse:images
      }
    }
    componentDidMount(){
      if (Platform.OS === 'android') {
         BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid);
      }
    }

   componentWillUnmount() {
      if (Platform.OS === 'android') {
         BackAndroid.removeEventListener('hardwareBackPress', this.onBackAndroid);
      }
   }

    onBackAndroid = () => {
       this.props.navigator.pop();
       return true;
    }

    render() {
       return (
            <ImageViewer imageUrls={
 
 this.state.dataSourse} index={currentPosition}  saveToLocalByLongPress={
 
 <

最低0.47元/天解锁文章