"react-native": "0.40.0"
import React from 'react'
import {
StyleSheet,
Dimensions,
View,
Button,
Image,
Text
} from 'react-native';
var ViewPager = require('react-native-viewpager');
var deviceWidth = Dimensions.get('window').width;
//本地图片
const IMGS = [
require('../assets/selector_ok.png'),
require('../assets/selectBack.png'),
require('../assets/selector_cancle.png')
]
//网络图片
var NetIMGS = [
'https://images.unsplash.com/photo-1441742917377-57f78ee0e582?h=1024',
'https://images.unsplash.com/photo-1441716844725-09cedc13a4e7?h=1024',
'https://images.unsplash.com/photo-1441448770220-76743f9e6af6?h=1024',
'https://images.unsplash.com/photo-1441260038675-7329ab4cc264?h=1024',
'https://images.unsplash.com/photo-1441126270775-739547c8680c?h=1024',
'https://images.unsplash.com/photo-1440964829947-ca3277bd37f8?h=1024',
'https://images.unsplash.com/photo-1440847899694-90043f91c7f9?h=1024'
];
class ImagePager extends React.Component {
constructor(props) {
super(props);
var dataSource = new ViewPager.DataSource({
pageHasChanged: (p1, p2) => p1 !== p2,
});
this.state = {
dataSource: dataSource.cloneWithPages(NetIMGS)
}
}
_renderPage(data, pageID) {
return (
<Image
source={data}
style={styles.page}
/>
);
}
render() {
return (
<View style={styles.container}>
<ViewPager
style={{height:130}}
dataSource={this.state.dataSource}
renderPage={this._renderPage}
isLoop={true}
autoPlay={true}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
alignItems: 'flex-start',
paddingTop:5,
paddingLeft:5,
backgroundColor:'#999999',
paddingRight:5,
paddingBottom:5,
},
page: {
width: deviceWidth,//设备宽(只是一种实现,此处多余)
flex: 1,
height: 130,
resizeMode: 'stretch'
},
});
export default ImagePager;