React Native stickyHeader von ListView wird von Row Component von ListView überlappt

Question

Ich benutze react-native 0.46.0 und reagieren 16.0.0-alpha.12. Ich erstelle eine App, um Benachrichtigungen für Nutzer mit einem bestimmten Datum anzuzeigen. Ich benutze ListView und zeige das Datum im sticky Header an. Ich sehe, dass meine Kopfzeile oben klebrig ist, aber während ich scrolle, überlappte die Zeilenkomponente von ListView den sticky-Header, so dass wir den sticky header sehen können. Ich weiß nicht, was das Problem ist. In der rendeRow-Methode rende ich eine klassenbasierte Komponente. Ich betreibe meine App auf Android-Gerät. Dies ist meine Komponente, in der ich ListView verwende.

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; 

Dies ist meine 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; 

Dies ist meine EachNotification-Komponente.

 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

Zuerst schlage ich vor, FlatList oder SectionList zu verwenden, da sie leistungsfähiger sind. Ich vermute, dass Sie Abschnitt Header-Komponente eine durchgehende Hintergrundfarbe benötigt, so dass es nicht mit Ihren Zeilen überlappt. Es wird besser mit einem Screenshot.