画面截图如下:
代码如下:
import React,{ Component } from 'react'
import { View, Text, StyleSheet, TouchableOpacity, Dimensions, Image, ScrollView,ListView, Platform } from 'react-native'
import { Actions as NavigationActions } from 'react-native-router-flux'
import Swiper from 'react-native-swiper';
let { width, height } = Dimensions.get('window');
let Images = [
{ src: require('../Images/swiper/swiper_img_2.jpg') },
{ src: require('../Images/swiper/swiper_img_4.jpg') },
{ src: require('../Images/swiper/swiper_img_3.jpg') },
{ src: require('../Images/swiper/swiper_img_1.jpg') },
{ src: require('../Images/swiper/swiper_img_5.jpg') }
];
let headImages = [
{ src: require('../Images/head/1.png') },
{ src: require('../Images/head/2.png') },
{ src: require('../Images/head/3.png') },
{ src: require('../Images/head/4.png') },
{ src: require('../Images/head/5.png') },
{ src: require('../Images/head/6.png') },
{ src: require('../Images/head/7.png') },
{ src: require('../Images/head/8.png') },
{ src: require('../Images/head/9.png') },
{ src: require('../Images/head/10.png') },
{ src: require('../Images/head/11.png') },
{ src: require('../Images/head/12.png') },
{ src: require('../Images/head/13.png') },
{ src: require('../Images/head/14.png') },
{ src: require('../Images/head/15.png') },
];
let describe = [
'失忆症',
'降世神通:最后的气宗',
'死神',
'七龙珠',
'妖精的尾巴',
'钢之炼金术师',
'冰菓',
'犬夜叉',
'黑子的篮球',
'火影忍者',
'海贼王',
'噬魂师',
'刀剑神域',
'吸血鬼骑士',
'绝园的暴风雨',
];
class Home extends Component{
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
swiperShow:false,
dataSource: ds.cloneWithRows([
'amnesia-anime', 'avatar-the-last-airbender', 'bleach-anime', 'dragonball-goku', 'fairy-tail'
, 'fullmetal-alchemist', 'hyouka', 'inuyasha', 'kuroko-no-basuke', 'naruto'
, 'one-piece-anime', 'souleater', 'sword-art-online', 'vampire-knight', 'zetsuen-no-tempest'
, 'amnesia-anime', 'avatar-the-last-airbender', 'bleach-anime', 'dragonball-goku', 'fairy-tail'
, 'fullmetal-alchemist', 'hyouka', 'inuyasha', 'kuroko-no-basuke', 'naruto'
, 'one-piece-anime', 'souleater', 'sword-art-online', 'vampire-knight', 'zetsuen-no-tempest'
])
};
}
componentDidMount(){
setTimeout(()=>{
this.setState({
swiperShow:true
});
}, 0)
}
_renderRow(rowData, sectionID, rowId) {
var imageIndex = rowId % 15;
return (
<View>
<View style={{ flex: 1, flexDirection: 'row', backgroundColor: '#ffffff', }}>
<View style={{padding: 5}}>
<Image source={headImages[imageIndex].src} style={{ width: 115, height: 80 }} />
</View>
<View style={{ paddingVertical: 12, paddingHorizontal: 11, width: width - 115, }}>
<Text style={{ fontFamily: 'HelveticaNeue', fontSize: (Platform.OS === 'ios') ? 18 : 16, color: '#444444', fontWeight: '500' }}
numberOfLines={3}>{rowData}</Text>
<Text style={{width: width - 115, paddingTop:20}}>{describe[imageIndex]}</Text>
</View>
</View>
<View style={{height:2, backgroundColor:"#f2f2f2", width:width}}/>
</View>
)
}
_renderSwiper() {
if(this.state.swiperShow){
return (
<View style={styles.swiperContainer}>
<Swiper
style={styles.swiperStyle}
height={150}
horizontal={true}
autolay={true}
autoplayTimeout={3}
loop={true}
paginationStyle={{ bottom: 10 }}
showsPagination={true}
index={0}
dotStyle={{ backgroundColor: 'rgba(0,0,0,.2)', width: 6, height: 6 }}
activeDotStyle={{ backgroundColor: 'rgba(0,0,0,.5)', width: 6, height: 6 }}>
<View style={styles.swiperItem}>
<Image style={styles.imageStyle} source={Images[0].src}></Image>
</View>
<View style={styles.swiperItem}>
<Image style={styles.imageStyle} source={Images[1].src}></Image>
</View>
<View style={styles.swiperItem}>
<Image style={styles.imageStyle} source={Images[2].src}></Image>
</View>
<View style={styles.swiperItem}>
<Image style={styles.imageStyle} source={Images[3].src}></Image>
</View>
<View style={styles.swiperItem}>
<Image style={styles.imageStyle} source={Images[4].src}></Image>
</View>
</Swiper>
</View>
)
}
}
render(){
return (
<View style={styles.container}>
<ListView style={styles.listStyle}
dataSource={this.state.dataSource}
removeClippedSubviews={false}
renderRow={(rowData, sectionID, rowId) => this._renderRow(rowData, sectionID, rowId)}
renderSectionHeader={(sectionData, sectionId) => this._renderSwiper()}
/>
</View>
);
}
}
// define your styles
const styles = StyleSheet.create({
container: {
flex: 1
},
swiperContainer: {
height: 150,
},
swiperStyle: {
flex: 1,
width: width,
height: 150,
},
swiperItem: {
flex: 1,
justifyContent: 'center',
backgroundColor: 'transparent',
height: 150,
},
imageStyle: {
flex: 1,
width:width,
height: 150,
},
listStyle: {
flex: 1,
}
});
export default Home;