首先，第一步必须升级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这样既可以滚动又可以放大进行预览了。