使用saltui实现图片预览查看

项目是基于dingyou-dingtalk-mobile脚手架的一个微应用，这个脚手架使用的UI是antd-mobile，它提供了一个图片上传的组件，但是未提供图片预览的组件，在网上找了不少如何在react项目中实现图片预览查看的功能，大多数都是基于react-native的，比如https://segmentfault.com/a/1190000010090233里面所说的react-wx-images-viewer组件，以及https://www.jianshu.com/p/6374a1ec3f01里介绍的react-native-photo-browser组件，但是这个脚手架未引用到react-native，试着在该脚手架上安装react-native，进而使用这些组件，但是都报错了，无法实现。

看了下钉钉官方推荐的saltui，里面提供了图片预览的的功能，可参看https://salt-ui.github.io/components/image-viewer，立即按照其说明进行了安装。

打开nowaGui对于项目下的终端，输入以下命令行即可安装。

npm install saltui --save

 

接下来是在页面上的引用。加入以下两句即可。（当时在引用的时候少加了dd.css，导致一直没有使用成功，以为在这个脚手架中只能使用一种ui呢。）

import { ImageViewer,Boxs } from 'saltui';
import 'saltui/build/dd.css';

接下来即是获取图片数据、填充进组件里即可了

show =(index)=>{

        ImageViewer.show({
            photos: this.listForImageLook(this.state.imagesList),
            current: index,
          });

    }

 

 

 

const listForImage = (imagesList) => {
            let images = [];
            for(let i = 0; i < imagesList.length; i++) {

                let m  = {url : AUTH_URL + 'appImages/' + imagesList[i].imageName,id : imagesList[i].id};

                images.push(
                    <Box>
                    <img src={AUTH_URL + 'appImages/' + imagesList[i].imageName}  className="demo3-t-list-img"  
                    onClick={this.show.bind(this,i)}/>
                    </Box>  );
            }
            
            return images;
        }

 

<div style={{display: this.state.imagesList.length == 0 ? 'none' : ''}}>
                <WhiteSpace size="lg" />
               
                <Card>
                <Card.Header
                    title={<span><font color="gray"> * </font>图片</span>}
                />
                <Card.Body  style={{width : '90%'}}>
                    <HBox vAlign="center">
                    <HBox flex={1}>
                        {listForImage(this.state.imagesList)}   
                    </HBox>
                    </HBox>
                </Card.Body>
                
                </Card>
                </div>