React native 反应本机平面列表不滚动到末尾

我得到了一个简单的

FlatList

，它呈现了一个

卡片列表（代码如下）

问题：列表呈现，但不会滚动以完全显示列表中的最后一个元素，或滚动到
平面列表下方的内容

我尝试的内容：基本上所有相关SO问题：


删除所有样式
在
视图
或
滚动视图
或两者中包装
平面列表
将
style={{flex:1}}
添加到
FlatList
或包装器（这会导致**所有*内容消失）

有什么想法吗

<FlatList
        data={props.filteredProducts}
        renderItem={({item}) => (
          <TouchableOpacity onPress={() => props.addItemToCart(item)}>
            <Card
              featuredTitle={item.key}
              image={require('../assets/icon.png')}
            />
          </TouchableOpacity>
        )}
        keyExtractor={item => item.key}
        ListHeaderComponent={
          <SearchBar />
        }
      />
...
<Other Stuff>

(
道具.附加零件（项目）}>
)}
keyExtractor={item=>item.key}
列表头组件={
}
/>
...
我不确定您的场景是否与几个月前我在项目中遇到的场景完全相同，但我注意到我必须添加一个
边距/填充
（取决于您喜欢什么）来提升可滚动容器的底部。这通常是因为父容器似乎会干扰可滚动元素的样式设置

您是否尝试过将
flexGrow:1
添加到您的样式中以代替
flex
？
我的案例有点不同，因为我使用了
FlatList
在
重新激活的底片
包提供的底片中。但问题是一样的：滚动没有正确显示最后一项

我的方法是计算并设置包含
平面列表的视图的高度。为了使它在有底部插入时看起来更好，我通过这样做为
FlatList
的最后一项增加了底部边距：

<FlatList
    data={results}
    keyExtractor={(item) => item.name}
    scrollEnabled={bottomSheetIndex == 1 ? true : false}
    renderItem={({ item }) =>
        <LocationInfo
            bottom={results[results.length - 1].id == item.id ? insets.bottom : 0}
            result={item}
            wait={waitState[item.id]}
            bsIndex={bottomSheetIndex}
        />
    }
/>

const LocationInfo = ({ bottom, result, wait, bsIndex }) => {

    return (
        <View style={[styles.container, { paddingBottom: bottom }]}>
            ... 


item.name}
scrollEnabled={bottomSheetIndex==1？true:false}
renderItem={（{item}）=>
}
/>
const LocationInfo=（{bottom，result，wait，bsIndex}）=>{
返回(
... 

有关插图，请参见
react native safe area context
将flex:1添加到我的渲染项对我有效

 <FlatList
      data={data}
      renderItem={({ item }) => (
        <ListItem
          onPress={() => console.log('ok')}
          bottomDivider
          rightTitle={
            <Divider style={{ marginBottom: 4, backgroundColor: item.status, width: '50%', height: '11%', borderRadius: 10 }} />
          }
          titleProps={{ numberOfLines: 1 }}

          rightSubtitle={item.date}
          rightTitleStyle={{ fontFamily: 'poppins' }}
          rightSubtitleStyle={{ fontFamily: 'poppins' }}
          titleStyle={{ fontFamily: 'poppins' }}
          subtitleStyle={{ fontFamily: 'poppins' }}
          title={item.device}
          subtitle={item.type}
          leftAvatar={{ source: item.icon, rounded: false }}
          **style={{ flex: 1 }}**
        />
      )}
      keyExtractor={item => item._id}
      ListHeaderComponent={renderHeader}
      ListFooterComponent={renderFooter}
      onEndReached={handleLoadMore}
      onEndReachedThreshold={0.2}

    />

(
console.log（'ok'）}
底部分隔器
右标题={
}
titleProps={{numberOfLines:1}
rightSubtitle={item.date}
rightTitleStyle={{fontFamily:'poppins'}}
rightSubtitleStyle={{fontFamily:'poppins'}}
titleStyle={{fontFamily:'poppins'}}
subtitleStyle={{fontFamily:'poppins'}}
title={item.device}
subtitle={item.type}
leftAvatar={source:item.icon，舍入：false}
**style={{flex:1}}**
/>
)}
keyExtractor={item=>item.\u id}
ListHeaderComponent={renderHeader}
ListFooterComponent={renderFooter}
onEndReached={handleLoadMore}
onEndReachedThreshold={0.2}
/>
为作为平面列表父视图的每个视图元素添加
style={{{flex:1}
。
从平面列表中删除flex:1，只保留父视图

将
flex:1
添加到
renderItem


(
...
)}
I我用来解决这个问题的方法是将平面列表背景色的父视图设置为可见色（例如红色）。然后调整该视图的边距底部，使其足够大，以便可以查看平面列表中的所有内容

在我的例子中，父视图被包装在另一个视图中，我无法为其提供
flex:1
样式。
我也有同样的问题。我所做的是为平面列表的父视图提供一个边距底部，其大小等于（或略大于）渲染项的大小

<View style={{marginBottom: HEIGHT_OF_CELL + 60, flexGrow:1}}>
    <FlatList
         keyExtractor={(item, index) => index.toString()}
         data={posts}
         renderItem={renderItem}
    />
            
</View>
        


index.toString（）}
数据={posts}
renderItem={renderItem}
/>
我也遇到了同样的问题，刚刚找到了解决方案。添加prop
ListFooterComponent
，给它一个React元素/组件。我刚刚通过了一个更高的视图，它非常适合我

以下是代码片段：

<FlatList
        data={DATA}
        renderItem={({ item }) => (<ListItem itemData={item} />) }
        keyExtractor={item => item.id}
        ListFooterComponent={<View style={{height: 20}}/>}
      />

（）}
keyExtractor={item=>item.id}
ListFooterComponent={}
/>

这可以100%工作！
使用父视图的尺寸标注，并根据给定设置高度：

const screenHeight = Dimensions.get('window').height - 100 
 <View style={{...styles.container,height:screenHeight}}>
 ....All child components
 </View>

const screenHeight=Dimensions.get（'window'）。高度-100
..所有子组件
最终的解决方案是✔

任何包含平面列表的视图/子视图的伸缩度必须为1——无论有多深

因此，如果您应用了此功能，但它不起作用，请检查您的样式，确保没有任何错误。
感谢您的解释-添加
marginBottom
确实有助于滚动，但下面的内容仍然不存在。我怀疑问题可能来自其他地方-如您所建议的父容器-其中c如果我确认了这一点，我会接受这个答案。另外，
flexGrow
什么也没做，但是很高兴了解到这一点，谢谢还没有，不幸的是-周末没有太多时间来做这件事，但我会在这周回来更新/接受答案。嘿，伙计们，我也遇到了同样的问题，有什么解决方案吗？你们检查过了吗d如果它嵌套在一个带有FlexGrow:1+的ScrollView中，那么你的平面列表也有一个FlexGrow:1？…因为如果是，它将不起作用…是的@HendEl Sahli-我尝试过添加和删除一个ScrollView，尝试过只渲染没有容器的列表-没有乐趣，我很抱歉，所以请尝试用一个非常简单的替换
renderItem
组件例如，de>Text
，看看这是否与此有关。这太棒了。我简直不敢相信这就是原因。我花了4小时43分钟试图弄明白这一点。
const screenHeight = Dimensions.get('window').height - 100 
 <View style={{...styles.container,height:screenHeight}}>
 ....All child components
 </View>