FlatList 之后 TouchableOpacity 之间的巨大差距

Question

我正在尝试在 React Native 中的 FlatList 之后创建一个 TouchableOpacity。虽然它在视图下，但列表和按钮之间存在巨大差距。

对应代码如下：

           <FlatList keyExtractor={(payment) => payment.iconFont} style={{ alignSelf: "center" }} data={payments} renderItem={({ item }) => {
                return <View style={{ width: '100%', marginTop: 32 }}>
                    <View style={{ flexDirection: "row" }}>
                        <View>
                            <FontAwesome5 name={item.iconFont} size={32} />
                        </View>
                        <View>
                            <Text style={{ fontSize: 18, marginLeft: 16 }}>{item.mainText}</Text>
                            <Text style={{ fontSize: 12, marginLeft: 12 }}>{item.SubText}</Text>
                        </View>
                    </View>
                </View>
            }} />

            <TouchableOpacity style={styles.button}>
                <Text style={{ color: "#FFF", fontWeight: "500", fontSize: 20 }}>PAY</Text>
            </TouchableOpacity>

我这里做错了什么？

P.S。 => 虽然 FlatList 工作正常

对应样式：

button: {
        backgroundColor: "#000000",
        height: 40,
        alignItems: "center",
        justifyContent: "center",
        borderRadius: 20
    }

Answer 1

将 Touchable Opacity 移动到 Flatlist 的 listfootercomponent 属性中。像这样：

<FlatList
     ListFooterComponent={<TouchableOpacity> .... </TouchableOpacity>}
/>

这应该可以解决间距问题。并将 TouchableOpacity 组件始终放在 FlatList 的底部。

FlatList 之后 TouchableOpacity 之间的巨大差距

Huge gap between TouchableOpacity after FlatList

react-native

react-native-android