React Native中搭配react-native-parallax-header的FlatList无法显示全部条目怎么办

解决方案 #

以下是按优先级排序的修复步骤：

1. 修复RefreshControl状态与引用错误
   你当前的loadCategories方法请求结束后未将refreshing重置为false，且refreshControl属性中引用了未定义的refreshing变量，会导致FlatList渲染异常，修改代码如下：

   loadCategories = async () => {
       this.setState({ refreshing: true });
       try {
           let categories = await this.props.getCategories();
           console.log(categories)
           this.setState({ 
               categories, 
               lastFetchCategoriesTime: new Date(), 
               refreshing: false 
           });
       } catch (err) {
           // 异常时也要重置刷新状态
           this.setState({ refreshing: false })
       }
   };
   

   同时修改FlatList的refreshControl属性引用：

   refreshControl={
       <RefreshControl refreshing={this.state.refreshing} onRefresh={this.loadCategories} />
   }
   

2. 修复布局高度约束缺失问题
   react-native-parallax-header的内容区域、FlatList父容器未设置flex属性时，会出现高度计算错误，仅渲染部分内容，修改renderContent布局：

   const renderContent = (label) => (
       <View style={{ flex: 1, backgroundColor: '#FBFCFF', top: -10 }}>
           <CategoryListView style={{flex: 1}}>
               {this.state.categories && <FlatList
                   horizontal={false}
                   data={this.state.categories}
                   contentContainerStyle={{ paddingBottom: 20, flexGrow: 1 }}
                   refreshControl={
                       <RefreshControl refreshing={this.state.refreshing} onRefresh={this.loadCategories} />
                   }
                   showsHorizontalScrollIndicator={false}
                   showsVerticalScrollIndicator={true}
                   renderItem={({ item }) => { return <CardActivity gotoCategoryDetail={this.gotoCategoryDetail} key={item._id} category={item}></CardActivity> }}
                   keyExtractor={(item) => item._id}
               />}
           </CategoryListView>
       </View>
   )
   

3. 解决嵌套滚动冲突
   react-native-parallax-header自带滚动逻辑，与内部FlatList的滚动事件抢占会导致内容截断，给FlatList添加scrollEnabled={false}属性，将滚动逻辑交给外层视差组件处理即可。

4. 强制FlatList重渲染
   如果修改后仍存在内容显示不全的问题，给FlatList添加extraData={this.state.refreshing}属性，强制组件在分类数据更新时全量重渲染。

额外检查：确认你的CategoryListView组件没有设置固定高度，若有固定高度配置，删除固定高度改为flex布局即可。

内容的提问来源于stack exchange，提问作者PvUIDev