参考https://github.com/w530385371/react-native-swiper
~~~
//安装依赖
npm install react-native-swiper --save
~~~
index.android.js
~~~
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
var SwipeImg=require('./swipe/swipe.js');
export default class demo extends Component {
render() {
return (
<View>
//swipe组件
<SwipeImg></SwipeImg>
</View>
);
}
}
const styles = StyleSheet.create({
container:{
}
});
AppRegistry.registerComponent('demo', () => demo);
~~~
swipe.js
~~~
import React, { Component } from 'react';
import {
Text,
View,
Image,
Dimensions
} from 'react-native';
import Swiper from 'react-native-swiper';
const { width } = Dimensions.get('window');
//根据处理图片的宽高
const scale=1200/460;
const height=width/scale;
const styles = {
wrapper: {
},
slide: {
flex: 1,
justifyContent: 'center',
backgroundColor: 'transparent'
},
slide1: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#9DD6EB'
},
slide2: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#97CAE5'
},
slide3: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#92BBD9'
},
text: {
color: '#fff',
fontSize: 30,
fontWeight: 'bold'
},
image: {
width,
flex: 1
}
}
class swipe extends Component {
render () {
return (
<View>
<Swiper style={styles.wrapper} height={height} autoplay
onMomentumScrollEnd={(e, state, context) => console.log('index:', state.index)}
dot={<View style={{backgroundColor: 'rgba(0,0,0,.2)', width: 5, height: 5, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3}} />}
activeDot={<View style={{backgroundColor: '#000', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3}} />}
paginationStyle={{
bottom: 0, left: 0, right: 0
}} loop>
<View style={styles.slide} title={<Text numberOfLines={1}>Aussie tourist dies at Bali hotel</Text>}>
<Image resizeMode='stretch' style={styles.image} source={{uri:'http://img.mukewang.com/57fdaf4f000156bf12000460.jpg'}} />
</View>
<View style={styles.slide} title={<Text numberOfLines={1}>Big lie behind Nine’s new show</Text>}>
<Image resizeMode='stretch' style={styles.image} source={{uri:'http://img.mukewang.com/57ece28d0001008c12000460.jpg'}} />
</View>
<View style={styles.slide} title={<Text numberOfLines={1}>Why Stone split from Garfield</Text>}>
<Image resizeMode='stretch' style={styles.image} source={{uri:'http://img.mukewang.com/57fdaf5f0001cf3512000460.jpg'}} />
</View>
<View style={styles.slide} title={<Text numberOfLines={1}>Learn from Kim K to land that job</Text>}>
<Image resizeMode='stretch' style={styles.image} source={{uri:'http://img.mukewang.com/57fdaf6e00018fb612000460.jpg'}} />
</View>
</Swiper>
</View>
)
}
}
module.exports=swipe;
~~~
