Horizontal Flatlist Re-Render 更改 ListHeaderComponent

Question

我正在努力解决这个问题。我正在使用水平平面列表。并在 ListHeaderComponent 中放置一个视图作为填充。您可以在下面的第一张图片中将其视为一个蓝色框。效果很好。问题是，当我从我的应用程序的其他地方刷新平面列表时，填充似乎中断了。请参见下图 2 中的蓝色框。图片下方的代码。任何帮助表示赞赏。

加载时：

道具刷新后：

<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>

    )}/>

Answer 1

很难说问题出在哪里，尽管它很可能来自您将宽度应用到 HeaderComponent 的 itemOffset。

但是，我的印象是您可以更轻松地定义填充，而不是定义页眉和页脚组件，您可以通过将道具传递给列表来简单地将填充应用于列表的内容：contentContainerStyle

那样

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

但我认为您应该查看 itemOffset

的计算结果

Horizontal Flatlist Re-Render 更改 ListHeaderComponent

Horizontal Flatlist Re-Render changes ListHeaderComponent

react-native

react-native-flatlist

Horizo​​ntal Flatlist Re-Render 更改 ListHeaderComponent

Horizontal Flatlist Re-Render changes ListHeaderComponent

react-native

react-native-flatlist

Horizontal Flatlist Re-Render 更改 ListHeaderComponent