Повторный рендеринг горизонтального плоского списка ListHeaderComponent - PullRequest
Новая
       8

Повторный рендеринг горизонтального плоского списка ListHeaderComponent

0 голосов
/ 24 января 2020

Я бьюсь головой об этом. Я использую горизонтальный плоский список. И помещая представление в ListHeaderComponent, чтобы действовать как дополнение. Вы можете видеть это как синее поле на первом изображении ниже. Это прекрасно работает. Проблема в том, что, когда я обновляю sh flatlist из другого места в моем приложении, отступы, кажется, нарушаются. Смотрите синее поле на изображении 2 ниже. Код ниже изображения. Любая помощь приветствуется.

OnLoad: enter image description here

После реквизита refre sh: enter image description here

<FlatList
    ref={(ref) => { this.flatListRef = ref; }}
    horizontal={true}
    showsHorizontalScrollIndicator={false}
    data={this.props.store.allBookData}
    ListHeaderComponent={<View style={{ width: itemOffset / 2, height: 200, backgroundColor: 'blue' }}></View>}
    ListFooterComponent={<View style={{ width: itemOffset /2 }}></View>}
    renderItem={({ item }) =>(

        <TouchableWithoutFeedback onPress={() => this.gotoBook(item)}>

            <Animatable.View 
                animation={"fadeIn"}
                easing={"ease-in-out"}
                duration={320}
                delay={240}
                useNativeDriver={true}  
                style={[styles.bookItem, { width: itemWidth, height: itemHeight, marginTop: itemMarginTop, opacity: 1, marginRight: 24 }]}>

                {/* cover */}
                <View style={[styles.bookCover, { width: itemWidth, height: bookHeight, backgroundColor: global.setBookItemColor(item.color)}]}>

                    <View style={styles.bookBindingHolder}>
                        <View style={styles.bookBinding}></View>
                    </View>

                    <View style={styles.bookCoverPhotoHolder}>
                        <View style={styles.bookCoverPhoto}>
                            <FastImage style={styles.bookCoverFrame} resizeMode={'contain'} source={Images.coverFrameWithTape}/>

                            {(() => {

                                //display cover
                                if (item.cover == 'temp') {
                                    //temp
                                    return (<FastImage style={styles.bookCoverImg} resizeMode={'cover'} source={Images.tempCover} />)
                                }else{
                                    //photo
                                    return (
                                        <FastImage 
                                            style={[styles.bookCoverImg, {opacity: 0.88}]} 
                                            resizeMode={'cover'} 
                                            source={{uri: item.cover}}>
                                        </FastImage>
                                    )
                                }

                            })()}

                        </View>
                    </View>

                </View>

                {/* title */}
                <View style={styles.bookTitleHolder}>
                    <Text style={[global.TextStyles.h3, global.TextStyles.darkText, global.TextStyles.alignCenter]}>{item.title}</Text>
                </View>

                {/* count */}
                <View style={styles.bookPhotoCountHolder}>
                    <View style={styles.bookPhotoCount}>

                        {(() => {

                            if (item.photoCount == global.maxPhotos){
                                var itemCount = 'Full'
                            }else{
                                var itemCount = item.photoCount + '/' + global.maxPhotos
                            }

                            return(
                                <Text style={[global.TextStyles.lightText, global.TextStyles.smallerLabel]}>{itemCount}</Text>
                            )

                        })()}

                    </View>
                </View> 

            </Animatable.View>

        </TouchableWithoutFeedback>

    )}/>

1 Ответ

1 голос
/ 24 января 2020

Трудно сказать, откуда возникла проблема, даже если есть большая вероятность, что она связана с вашим itemOffset, который вы применяете в качестве ширины для своего HeaderComponent.

Однако у меня сложилось впечатление, что вы можете сделать это проще чтобы определить отступы, вместо того, чтобы определять компонент верхнего и нижнего колонтитула, вы можете просто применить отступы к содержимому вашего списка, передавая в свой список реквизиты: contentContainerStyle

, например 

<FlastList
    ...
    contentContainerStyle={{
        paddingHorizontal: itemOffset / 2
    }}
/>

но я думаю, что вы должны посмотреть в своем исчислении itemOffset

...