'including sections with sticky section headers ' and how to sticky the header of section?

[changfuguo]

the doc just tell us the listview support sticky section header, but i found it is does not work,

here are my code :

         'use strict'
        var videoTypies=[{name:'电影',value:'movie'},{name:'电视剧',value:'tv'},{name:'综艺',value:'zy'},{name:'动漫',value:'katong'}];
        var React = require('react-native');
        var {
            Image,
            StyleSheet,
            Text,
            TouchableWithoutFeedback,
            TouchableOpacity,
            View,
            ViewPagerAndroid,
            ListView,
            ToastAndroid,
            Platform,
            TouchableHighlight,
            TouchableNativeFeedback,
            Dimensions,
        } = React;


        var TimerMixin = require('react-timer-mixin');
        var PAGE_SIZE =  15;
        var CategoryTabBar = require('./CategoryTabBar');
        var deviceWidth = Dimensions.get('window').width;

        var Hot = React.createClass({
                mixins: [TimerMixin],
                getInitialState: function() {

                    var getSectionData = (dataBlob, sectionID) => {
                        return dataBlob[sectionID];
                    };

                    var getRowData = (dataBlob, sectionID, rowID) => {
                        return dataBlob[sectionID + ':' + rowID];
                    };

                    var dataSource = function () {
                        return new ListView.DataSource({
                           getRowData: getRowData,
                           getSectionHeaderData: getSectionData,
                           rowHasChanged: (row1, row2) => row1 !== row2,
                           sectionHeaderHasChanged: (s1, s2) => s1 !== s2
                        });
                    }
                    return {
                        page: 0,
                        progress: {position: 0, offset: 0},
                        movie: {
                            data: dataSource(),
                            loading : 0
                        },
                        zy : {
                            data: dataSource(),
                            loading : 0
                        },
                        tv: {
                            data: dataSource(),
                            loading : 0
                        },
                        katong: {
                            data: dataSource(),
                            loading : 0

                        }
                    };
                },

                componentWillMount () {

                },
                componentDidMount () {
                    this.fetchData();
                },
                fetchData () {
                    var page  = this.state.page;
                    var type = videoTypies[page].value;

                    var loading = this.state[type].loading;
                    if(loading === 1 || loading === 2) return;
                    var url = 'http://doukantv.com/api/hot/?type=' + type;
                    this.state[type].loading = 1;
                    fetch(url)
                        .then((res) => res.json())
                        .then((res) =>{
                            var temp ={};
                            temp[type] = {
                                data: this.getDataSource(type, res.result),
                                loading: 2
                            }
                            this.setState(temp);
                        })
                },
            onPageSelected: function(e) {
                 this.setState({page: e.nativeEvent.position});
                 var page  = e.nativeEvent.position;
                 var type = videoTypies[page].value;
                 if (this.state[type].loading === 0) {
                      this.setTimeout(this.fetchData,200);
                 }
            },
            onPageScroll: function(e) {
                this.setState({progress: e.nativeEvent});
            },
            move: function(delta) {
                var page = this.state.page + delta;
                this.viewPager && this.viewPager.setPage(page);
                this.setState({page});
            },
            go: function(page) {
                this.viewPager && this.viewPager.setPage(page);
                this.setState({page});
                var type = videoTypies[page].value;

                if (this.state[type].loading === 0) {
                    this.setTimeout(this.fetchData,200);
                }
            },
            getDataSource: function(type, videos): ListView.DataSource {
                var data  = this.state[type].data;

                var dataBlob = {};
                var sectionsID = [];
                var rowsID = [];
                videos.map((item, index)=>{
                    sectionsID.push(index);
                    dataBlob[index] = {name: item.name};
                    var rowID = rowsID[index] = [];
                    item.list.map((video) => {
                        var id = video.id;
                        dataBlob[index + ':' + id] = video;
                        rowID.push(id);
                    });
                });
                return data.cloneWithRowsAndSections(dataBlob, sectionsID, rowsID);
            },
            onSelect (video) {
                    this.props.navigator && this.props.navigator.push({
                        name:  'video',
                        id: video.id,
                        video: video
                    });
            },
            selectVideo (video) {
                this.props.navigator && this.props.navigator.push({
                    name:  'video',
                    id: video.id,
                    video: video

                });
            },
            renderRow: function(
                video: Object,
                sectionID: number | string,
                rowID: number | string,
                highlightRowFunc: (sectionID: ?number | string, rowID: ?number | string) => void,
                ) {
                    var TouchableElement = TouchableHighlight;
                    if (Platform.OS === 'android') {
                        TouchableElement = TouchableNativeFeedback;
                    }
                    return(
                          <TouchableElement onPress={() => this.selectVideo(video)} underlayColor="transparent">
                                <View>
                                      <View style={styles.row}>
                                            <Image source={{uri:video.vthumburl}} style={styles.cover} />
                                            <Text style={styles.name}>{video.programname}</Text>
                                            <Text style={[styles.brief,]} numberOfLines= {2} >{video.shortdesc}</Text>
                                      </View>
                                </View>
                          </TouchableElement>

                    );
              },
              renderSectionHeader: function(sectionData: Object,
                  sectionID: number | string) {
                    return (
                          <View style={styles.sectionHeader}>
                              <Text >| {sectionData.name}</Text>
                          </View>
                    );

              },
            onChangeVisibleRows (visibleRows, changedRows) {
                ToastAndroid.show('aaa',ToastAndroid.SHORT);
            },
            render: function() {
                var pages = [];
                for (var i = 0; i < videoTypies.length; i++) {
                    var pageStyle = {
                        backgroundColor:'red',
                        alignItems: 'center',
                        padding: 20,
                    };
                    var videoType = videoTypies[i];
                    pages.push(
                           <View key={i} style={styles.pageStyle} collapsable={true}>
                                  <ListView
                                       ref="listview"
                                       dataSource={this.state[videoType.value].data}
                                       renderRow={this.renderRow}
                                       automaticallyAdjustContentInsets={false}
                                       keyboardDismissMode="on-drag"
                                       keyboardShouldPersistTaps={true}
                                       renderSectionHeader={this.renderSectionHeader}
                                       showsVerticalScrollIndicator={true}
                                       initialListSize={12}
                                       onEndReachedThreshold={50}
                                       pageSize={6}
                                       onChangeVisibleRows = {this.onChangeVisibleRows}
                                       contentContainerStyle={styles.list}
                                     />
                          </View>
                    );
                }
                var page = this.state.page;
                return (
                  <View style={styles.container}>
                    <CategoryTabBar  go={this.go} page ={this.state.page} progress={this.state.progress}/>
                    <ViewPagerAndroid
                      style={styles.viewPager}
                      initialPage={0}
                      onPageScroll={this.onPageScroll}
                      onPageSelected={this.onPageSelected}
                      ref={viewPager => { this.viewPager = viewPager; }}>
                      {pages}
                    </ViewPagerAndroid>
                  </View>
                );
          },
        });

        var styles = StyleSheet.create({
            container: {
                flex: 1,
                backgroundColor: 'white',
            },
            viewPager: {
                flex: 1,
                justifyContent: 'space-around',
            },
            row: {
                justifyContent: 'center',
                padding: 5,
                margin: 3,
                width: 100,
                height: 180,
                backgroundColor: '#F6F6F6',
                alignItems: 'center',
             },
            list: {
                padding:20,
                paddingTop: 10,
                justifyContent: 'flex-start',
                flexDirection: 'row',
                flexWrap: 'wrap'
            },
            sectionHeader: {
                color: '#333',
                fontWeight: 'bold',
                flexDirection:'row',
                width: (deviceWidth - 40),
            },
            cover:{
                width:100,
                height:130,
                resizeMode: 'cover',
            },
            name: {
                fontSize: 12,
                color: '#666',
                height:15,
            },
            brief: {
                fontSize: 10,
                color: '#999',
                height:30
            }
        });

        module.exports = Hot;

here are the result

[han4wluc]

I have tried sticky section headers, it works only on ios. on android, they are still there but don't stick.
Should update the docs to reflect this?

[christopherdro]

@changfuguo You can go ahead and close this issue since it being tracked here.
#2700

[janicduplessis]

Closing this as it is a feature request tracked on product pains and the docs already mention that stickyHeaderIndices is iOS only.

[janicduplessis]

@facebook-github-bot close

[janicduplessis]

@facebook-github-bot close

[facebook-github-bot]

@janicduplessis tells me to close this issue. If you think it should still be opened let us know why.

[zhongjie-chen]

just iOS？