反应原生ListView的stickyHeader被ListView的行组件重叠

Question

我正在使用react-native 0.46.0并对16.0.0-alpha.12作出反应。我正在构建一个应用程序，向具有特定日期的用户显示通知。我正在使用ListView并在粘性标题中显示日期。我看到我的头部在顶部粘滞，但当我滚动ListView的行组件时会叠加粘性头部，所以我们可以看到粘性头部。我不知道问题是什么。在rendeRow方法中，我正在渲染一个基于类的组件。我在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; 

这是我的HeaderNotification。

 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; 

这是我的EveryNotification组件。

 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; 

Answer 1

首先，我建议使用FlatList或SectionList，因为它们更具有高性能。我怀疑你的部分头部组件需要一个坚实的背景颜色，以便它不与你的行重叠。截图会更好。