FlatList之后的TouchableOpacity之间的巨大差距

Question

我想在本机的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

将“可触摸不透明度”移动到Flatlist的listfootercomponent属性中。像这样：

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

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