Question

我正在为此努力奋斗。我正在使用水平平面列表。并将视图放在ListHeaderComponent中以充当填充。您可以在下面的第一个图像中将其视为一个蓝色框。很好。麻烦的是，当我从应用程序中的其他位置刷新列表时，填充似乎中断了。请参阅下面图像2中的蓝色框。图片下方的代码。任何帮助表示赞赏。

OnLoad：

道具刷新后：

<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

很难说问题出在哪里，即使很有可能是因为您将itemOffset用作HeaderComponent的宽度。

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

喜欢

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

但是我认为您应该查看一下itemOffset

水平Flatlist重新渲染更改ListHeaderComponent

1 个答案: