React Native ListView的使用，头部使用react-native-swiper

画面截图如下：

代码如下：

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;