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

Question

我得到了一个带有 textbox/button/others 组件的页面 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>;

Answer 1

用 style={{flex:1}} 包裹 Flatlist。如果它不起作用，请将 marginBottom 添加到 flatlist

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

Answer 2

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

Answer 3

我遇到了同样的问题。我试图在顶部添加填充，这导致其余内容被下推。您需要设置 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}
/>

Answer 4

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

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

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

Answer 5

在我的例子中，我必须将 flex:1 添加到外部视图来解决问题。

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

React Native FlatList with other Component doesn't scroll to the end

react-native

react-native-flatlist