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

我從this comment發現張貼了一個問題，有人想不會有粘頭，如果<ListView>嵌套在<ScrollView>內那麼粘性標題不會粘住。

我一直在使用NativeBase作爲構建應用程序UI的基礎，<Content>組件我相信從<ScrollView>繼承。

無論如何，當我將它從<Content>和<Container>組件中取出時，粘滯標頭可以正常工作。