与其他组件一起使用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

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

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

   O(N)

Answer 3

我有同样的问题。我试图在顶部添加填充，导致其余内容被压低。您需要设置contentContainerStyle道具来正确地进行修改，然后在style的{​​{1}}道具上设置所有其余样式。示例：

FlatList

Answer 4

您可以设置FlatList / ScrollView风格的width: '100%', height: '100%'来尝试。

Answer 5

就我而言，我必须在外观上添加 flex：1 来解决此问题。