与其他组件一起使用React Native FlatList不会滚动到结尾

Question

我有一个带有文本框/按钮/其他组件的页面RN平面列表,但问题是我无法滚动到平板列表的末尾,还有一些其他部分是溢出的.

 <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

包裹Flatlist着style={{flex:1}}.如果不起作用则添加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>

Answer 2

我遇到过同样的问题。我试图在顶部添加填充，这导致其余内容被推下。您需要设置contentContainerStyleprop 以正确修改它，然后在style.prop 的 prop上设置所有剩余样式FlatList。例子：

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