RN实现iOS tableview分组吸顶效果

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
    ListView,
    Image,
    TouchableOpacity
} from 'react-native';

var Car = require('./Car.json');

var ListDemo3 = React.createClass({
  getInitialState(){
    return{
      ds: new ListView.DataSource({
        getSectionData: (dataBlob, sectionID) => dataBlob[sectionID],
        getRowData: (dataBlob, sectionID, rowID) => dataBlob[sectionID + ':' + rowID],
        rowHasChanged: (r1, r2) => r1 !== r2,
        sectionHeaderHasChanged:(s1, s2) => s1 !== s2
      })
    }
  },
  componentDidMount(){
    var jsonData = Car.data;
    var dataBlob = {}, sectionIDs = [], rowIDs = [], cars = [];
    for(var i=0; i
          
            tableview吸顶效果Demo
          
          
        
    );
  },
  renderRow(row){
    return(
        
          
            
            {row.name}
          
        
    );
  },
  renderSectionHeader(sectionData, sectionID){
    return(
        
          {sectionData}
        
    );
  }
});

const styles = StyleSheet.create({
  outerViewStyle:{
    flex:1
  },
  headerViewStyle:{
    height:44,
    backgroundColor:'orange',
    justifyContent:'flex-end',
    alignItems:'center'
  },
  rowStyle:{
    flexDirection:'row',
    alignItems:'center',
    padding:8,
    borderBottomColor:'#EEEEEE',
    borderBottomWidth:0.5
  },
  rowImageStyle:{
    width:60,
    height:60,
  },
  sectionHeaderViewStyle:{
    backgroundColor:'#BBBBBB',
    height:20,
    justifyContent:'center'
  }
});

AppRegistry.registerComponent('ListDemo3', () => ListDemo3);