react 引入轮播插件_react添加图片轮播效果，带可放大功能

首先，第一步必须升级react和react-dom的版本到16，安装命令如下：

npm install react@^16.2.0

npm install react-dom@^16.2.0

npm install prop-types@^15.6.0

//安装prop-types库

npm install prop-types@^15.6.0

//文件中用到React.PropTypes的地方做修改

import PropTypes from 'prop-types';

Greeting.propTypes = {

name: PropTypes.string //原为：React.PropTypes.string

};

//如有此问题：Module not found: Error: Can't resolve 'react/lib/ReactMount'

npm install react-hot-loader@^3.1.3

升级react-hot-loader后wepack配置修改

/*

* Error: Module'.../node_modules/react-hot-loader/index.js'

* is not a loader (must have normal or pitch function)

*/

{

test: /\.(js|jsx)$/,

//升级react-hot-loader将babel-loader改为loader:'react-hot-loader/webpack',

loader: 'babel-loader' ,

exclude: /node_modules/,

options: {

presets: [["es2015", {"modules": false}], "stage-1", "react"],

// plugins: [

// "react-hot-loader/babel"

// // 开启 React 代码的模块热替换(HMR)

// ]

}

},

注：还需安装  解析es7的编译工具babel-preset-stage-1

npm install --save-dev babel-preset-stage-1

第三步，安装图片预览放大插件

npm install --save react-wx-images-viewer

使用：

import WxImageViewer from 'react-wx-images-viewer';

class App extends Component {

state = {

imags: [

require('./assets/2.jpg'),

require('./assets/1.jpg'),

require('./assets/0.jpg'),

require('./assets/3.jpg'),

require('./assets/4.jpg'),

],

index: 0,

isOpen: false

};

onClose = () =>{

this.setState({

isOpen: false

})

}

openViewer (index){

this.setState({

index,

isOpen: true

})

}

render() {

const {

imags,

index,

isOpen

} = this.state;

return (

{/*直接打开*/}

点击打开图片

{

this.state.imags.map((item, index) => {

return

})

}

{

isOpen ? : ""

}

)

}

}

export default App;

稍作修改之后的代码：

import React from 'react';

import ReactSwipe from 'react-swipe';

import WxImageViewer from 'react-wx-images-viewer';

import ImgPath from "../../constants/url";

class SwiperContent extends React.Component {

constructor(props, context) {

super(props, context);

this.state = {

index: 0,

imags: [

require('../../static/images/banner/grzq.jpg'),

require('../../static/images/banner/banner02.jpg'),

require('../../static/images/banner/banner03.jpg'),

],

isOpen: false

};

}

onClose(){

this.setState({

isOpen: false

})

}

openViewer (index){

this.setState({

index,

isOpen: true

})

}

render() {

let imgArr =this.props.ImgDataArray;

const {

index,

isOpen

} = this.state;

var opt = {

startSlide:0, //开始滚动的位置,默认为0

auto: 5000, //开始自动幻灯片

continuous:true, //创建一个无限的循环

callback: (index) => { //幻灯片运行中的回调函数

this.setState({

index: index

})

}

};

return (

{/*直接打开*/}

{/*点击打开图片*/}

{

this.state.imags.map((item, index) => {

return

})

}

{/*{

this.state.imags.map((item, index) => {

return

})

}*/}

{

isOpen ? : ""

}

);

}

componentDidMount () {

}

}

export default SwiperContent

这样既可以滚动又可以放大进行预览了。