Question

我正在使用react-native 0.46.0并反应16.0.0-alpha.12。我正在构建一个应用程序，以向具有特定日期的用户显示通知。我正在使用ListView并在粘性标题中显示日期。我看到我的标题在顶部是粘性的，但当我滚动ListView的行组件重叠粘性标题时，我们可以看到粘性标题。我不知道问题是什么。在rendeRow方法中，我正在渲染基于类的Component。我在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，因为它们性能更高。我怀疑你的标题组件需要一个纯色背景，这样它就不会与你的行重叠。屏幕截图会更好。

ListView的React Native stickyHeader与ListView的Row Component重叠

1 个答案: