React Native - セクションヘッダーをListViewに貼り付けることができません

Question

なぜ私はセクションヘッダーをReact Native <ListView>の上部に貼り付けることができないのかを理解しようとしていますが、何も見えません助けてください。

私は私が正しく必要なメソッドrenderSectionHeaderを実装していますことをかなり確信していると私のdataBlobオブジェクトが正しく構成されている - 私は<ListView>は罰金レンダリングするために取得することができています、それは

...ちょうどセクションヘッダが付着していないのです

誰かが私が見落としたことを明らかにすることができますか？

ルートコンポーネント：

import React, { Component } from 'react'; 
import { 
    View 
} from 'react-native'; 

import { connect } from 'react-redux'; 

import { 
    Container, 
    Header, 
    Content 
} from 'native-base'; 
import TabFooter from '../../Components/Footer'; 
import ListViewWithSections from '../../Components/ListViewWithSections'; 

class Accommodation extends Component { 
    componentWillMount() { 
    // function that structures data into something suitable for ListView 
    const formatDataForListView = accommodation => { 
     const dataBlob = {}; 
     const sectionIDs = []; 
     const rowIDs = []; 
     let sectionID = -1; 

     accommodation.forEach((accom) => { 
     sectionID++; 
     sectionIDs.push(accom.id); 
     dataBlob[accom.id] = accom.name; 
     rowIDs[sectionID] = []; // initialise empty array associated with Section ID 
     accom.guests.forEach((guest) => { 
      rowIDs[sectionID].push(guest.id); 
      dataBlob[accom.id + ':' + guest.id] = guest; 
     }); 
     }); 

     console.log('dataBlob: ', dataBlob); 
     console.log('sectionIDs: ', sectionIDs); 
     console.log('rowIDs: ', rowIDs); 

     return { dataBlob, sectionIDs, rowIDs }; 
    }; 

    const { accommodation } = this.props; 
    const { dataBlob, sectionIDs, rowIDs } = formatDataForListView(accommodation); 
    this.setState({ dataBlob, sectionIDs, rowIDs }); 
    } 

    render() { 
    return (
     <Container> 
     <Header /> 
     <Content> 
      <ListViewWithSections 
      dataBlob={this.state.dataBlob} 
      sectionIDs={this.state.sectionIDs} 
      rowIDs={this.state.rowIDs} 
      /> 
     </Content> 
     <View> 
      <TabFooter /> 
     </View> 
     </Container> 
    ); 
    } 
} 

const mapStateToProps = state => { 
    return { accommodation: state.accommodation }; 
}; 

export default connect(mapStateToProps)(Accommodation); 

ListViewWithSections.js：

import React, { Component } from 'react'; 
import { 
    ListView, 
    Row, 
    Text, 
    View 
} from 'react-native'; 

class ListViewWithSections extends Component { 
    constructor(props) { 
    super(props); 

    const getSectionData = (dataBlob, sectionID) => dataBlob[sectionID]; 
    const getRowData = (dataBlob, sectionID, rowID) => dataBlob[sectionID + ':' + rowID]; 

    const ds = new ListView.DataSource({ 
     rowHasChanged: (r1, r2) => r1 !== r2, 
     sectionHeaderHasChanged: (s1, s2) => s1 !== s2, 
     getSectionData, 
     getRowData 
    }); 

    const { dataBlob, sectionIDs, rowIDs } = this.props; 
    console.log('RowIDs new: ', rowIDs); 
    this.state = { 
     dataSource: ds.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs) 
    }; 
    } 

    render() { 
    console.log('ListView this: ', this); 
    const renderRow = (data) => { 
     return (
     <View> 
      <Text>{data.name}</Text> 
     </View> 
    ); 
    }; 

    const renderSectionHeader = (sectionData, sectionID) => { 
     console.log('sectionData: ', sectionData); 
     console.log('sectionID: ', sectionID); 
     return (
     <View> 
      <Text style={{ fontWeight: '700' }}>{sectionData}</Text> 
     </View> 
    ); 
    }; 

    return (
     <ListView 
     dataSource={this.state.dataSource} 
     renderRow={renderRow} 
     renderSectionHeader={renderSectionHeader} 
     /> 
    ); 
    } 
} 

export default ListViewWithSections; 

Answer 1

は、私は誰かが<ListView>が<ScrollView>内にネストされている場合というスティッキーヘッダを持っていたかった掲示問題にthis commentから発見しました粘着性のあるヘッダーは貼り付かない。

私はアプリのUIを構築するための基礎としてNativeBaseを使用しており、<Content>コンポーネントは<ScrollView>から継承しています。

とにかく、私が<Content>と<Container>コンポーネントから取り出したとき、スティッキーヘッダーは正常に動作します。