ListView的React Native stickyHeader与ListView的行组件重叠

我使用的是react native 0.46.0和react 16.0.0-alpha.12。我正在构建一个应用程序，向用户显示特定日期的通知。我正在使用ListView并在粘性标题中显示日期。我的“查看我的标题”在顶部是粘性的，但当我滚动时，ListView的行组件与粘性标题重叠，因此我们可以看到粘性标题。我不知道是什么问题。在RenderRow方法中，我正在呈现一个基于类的组件。我正在android设备上运行我的应用程序。这是我使用ListView的组件

import React, { Component } from 'react';
import { View, Text, Image, ListView,TouchableOpacity,LayoutAnimation, TextInput, DeviceEventEmitter,  ScrollView } from 'react-native';
import EachNotification from '../components/EachNotification';
import HeaderNotification from '../components/HeaderNotification';

import { WHITE } from '../assets/Colors.js';

const DATA = [
 {
   date: '1-1-2000',
   type: 'comment'
 },
 {
   date: '1-1-2000',
   type: 'favourite'
 },
 {
   date: '1-1-2000',
   type: 'comment'
 },
 {
   date: '10-10-2000',
   type: 'comment'
 }
];


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

      const getSectionData = (dataBlob, sectionId) => dataBlob[sectionId];
      const getRowData = (dataBlob, sectionId, rowId) => dataBlob[`${rowId}`];

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

      const { dataBlob, sectionIds, rowIds } = this.formatData(DATA);
      this.state = {
         dataSource: ds.cloneWithRowsAndSections(dataBlob, sectionIds, rowIds),
             };
     }

      formatData(data) {
          const dateArray = [];

          for (let i = 0; i < data.length; i++) {
                 dateArray.push(data[i].date);
             }

          const uniqueDateArray = dateArray.filter((elem, index, self) => {
                 return index === self.indexOf(elem);
           });

           const dataBlob = {};
           const sectionIds = [];
           const rowIds = [];

           for (let sectionId = 0; sectionId < uniqueDateArray.length; sectionId++) {
            const currentDate = uniqueDateArray[sectionId];

            const notifications = data.filter((notification) => notification.date === currentDate);

            if (notifications.length > 0) {
                 sectionIds.push(sectionId);

                 dataBlob[sectionId] = { date: currentDate };

                 rowIds.push([]);

                 for (let i = 0; i < notifications.length; i++) {
                   const rowId = `${sectionId}:${i}`;

                   rowIds[rowIds.length - 1].push(rowId);

                   dataBlob[rowId] = notifications[i];
                 }
             }
         }
         return { dataBlob, sectionIds, rowIds };
      }
      render() {
          return (

            <ListView
              style={styles.container}
              stickySectionHeadersEnabled
              dataSource={this.state.dataSource}
              renderRow={(data) => {
                     return <EachNotification />;
               }}
              renderSectionHeader={(sectionData) => <HeaderNotification {...sectionData} />}
             />
          );
       }
     }

     const styles = {
     container: {
       backgroundColor: WHITE,
     }
     };

     export default Notification; 

这是我的校长通知

      import React from 'react';
      import { View, Text } from 'react-native';
      import { HEADER_GREY, BLACK } from '../assets/Colors.js';

      const HeaderNotification = (props) => {
         return (
              <View style={styles.container}>
               <Text style={styles.timeText}>{props.date}</Text>
              </View>
            );
          };

       const styles = {
         container: {
            height: 40,
            backgroundColor: HEADER_GREY,
            justifyContent: 'center',
            alignItems: 'center',
            zIndex: 200
           },
         timeText: {
            color: BLACK,
            fontFamily: 'ubuntuBold',
            fontSize: 14
           }
         };

     export default HeaderNotification;

这是我的每一份通知单

     import React, { Component } from 'react';
     import { View, Text, Image, TouchableOpacity } from 'react-native';
     import Icon from 'react-native-vector-icons/FontAwesome';

     import { LIGHT_WHITE, BLACK, WHITE, PURPLE } from '../assets/Colors.js';

     class EachNotification extends Component {
        render() {
          return (
             <TouchableOpacity style={{ zIndex: -100 }}>
             <View style={[styles.container, { zIndex: -100 }]}>
             <View style={styles.profileImgCircle}>
             <Image
                  style={styles.profileImg}
                   source={require('../assets/images/profile.png')}
              />
            </View>
             <View style={styles.descriptionPart}>
             <Text style={styles.username}>Sankalp Singha</Text>
              <View style={styles.follower}>
              <Icon name='child' size={18} color={PURPLE} style={styles.followerIcon} />
                <Text style={styles.followingText}>Started following you.</Text>
               </View>
             </View>
            </View>
          </TouchableOpacity>
      );
     }
     }

     export default EachNotification;

---

首先，我建议使用FlatList或SectionList，因为它们性能更好。我怀疑您的节标题组件需要纯色背景，这样它就不会与行重叠。有截图会更好