React Native FlatList 与其他组件不会滚动到最后

Posted 2023-02-16

【中文标题】React Native FlatList 与其他组件不会滚动到最后

【英文标题】：React Native FlatList with other Component doesn't scroll to the end

【发布时间】：2018-06-22 13:54:43

【问题描述】：

我有一个带有文本框/按钮/其他组件的页面 RN flatlist，但问题是我无法滚动到 flatlist 的末尾，还有一些其他部分有点溢出。

 <View>
<TextInput
    value=this.state.code
    onSubmitEditing=this.getPr
    style=styles.input
    placeholder="placeholder"
/>
<Button onPress=this.getPr title="Cari" color="blue" />
<FlatList
    data=this.props.produk
    renderItem=( item ) => (
        <View key=item.id>
            <Image
                resizeMode="cover"
                source= uri: item.thumb 
                style=styles.fotoProduk
            />
        </View>
    )
    keyExtractor=(item, index) => index
/>
</View>;

【参考方案1】：

用style=flex:1 包裹Flatlist。如果它不起作用，请将 marginBottom 添加到平面列表

<View style=flex:1>

<FlatList
    data=this.props.produk
    renderItem=( item ) =>
        <View key=item.id >
            <Image resizeMode="cover" source= uri: item.thumb  style=styles.fotoProduk />
        </View>
    
    keyExtractor=(item, index) => index/>
</View>

【参考方案2】：

我有同样的问题。我试图在顶部添加填充，导致其余内容被向下推。您需要设置contentContainerStyle 属性以正确修改它，然后在FlatList 的style 属性上设置所有剩余样式。示例：

<FlatList
  style=
    flex: 1
  
  contentContainerStyle=
    paddingTop: 40
  
  data=this.props.produk
  renderItem=( item ) => (
    <View key=item.id>
      <Image
        resizeMode="cover"
        source= uri: item.thumb 
        style=styles.fotoProduk
      />
    </View>
  )
  keyExtractor=(item, index) => index
/>

【参考方案3】：

在视图中添加 style=flex:1。

在 FlatList 中添加 contentContainerStyle= paddingBottom: 10。查看示例代码：

     <View style=flex:1>
         <FlatList
             contentContainerStyle= paddingBottom: 10
             renderItem=( item ) =>
               return(console.log(item))
             
             />
     </View>

【参考方案4】：

就我而言，我必须将 flex:1 添加到外部视图中才能解决问题。

【参考方案5】：

你可以设置width: '100%', height: '100%'为FlatList/ScrollView的样式试试。

【讨论】：

如果你不是 100% 肯定不要这样回答。您可以发表评论，也可以通过详细解释您在说什么来回答。

因为我知道 ScrollView/FlatList 在使用垂直滚动时有时会丢失高度（我没有在水平模式下尝试）。顺便说一句，对不起我的 Endrisk：D