无法显示平面列表页脚

Question

我想在我的平面列表中添加页脚： 我试试这个代码：

renderFooter = () => {
return (
<View
style={{
paddingVertical: 20,
borderTopWidth: 1,
borderColor: "#CED0CE"
}}
>
<Button> This is footer </Button> 
</View>
);
}
<FlatList
data={menuData}
renderItem={({item}) => <DrawerItem navigation={this.props.navigation} screenName={item.screenName} icon={item.icon} name={item.name} key={item.key}  />}
ListFooterComponent ={this.renderFooter}
/>

但是运行时不会出现页脚。

请提供任何帮助

Answer 1

您使用了组件

列表页脚组件

以正确的方式。您需要检查页脚的呈现方法。我遇到了同样的问题，我遵循这个例子，它对我有帮助。我希望它能帮助你。

Answer 2

简单的方法/黑客。在 menuData 数组中，您只需向子对象添加一个标志(i 调用(以指示它是最后一项。例如：

如果可以修改菜单数据结构，请添加 lastItem prop true 以指示它是最后一项：

const menuData = [
{name:'menu1', screenName:'screen1', icon:'../assets/icon1.png'},   
{name:'menu2', screenName:'screen2', icon:'../assets/icon2.png', lastItem:true}
];

然后

renderFlatItems = ({item}) => {
const itemView = null;
if (!items.lastItem) {
itemView = <DrawerItem navigation={this.props.navigation} screenName={item.screenName} icon={item.icon} name={item.name} key={item.key}  />
} else {
itemView = <View style={{padding:100}}><Button> This is footer </Button> </View>
}  
return {itemView};
}

然后在平面列表中使用它，如下所示

<FlatList
data={menuData}
renderItem={this.renderFlatItems}
/>

Answer 3

如果您希望页脚保留在屏幕底部的"上方"列表，那么您可以在平面列表之后添加一个视图。

<View>
<FlatList style={{flex: 1}} />
<View 
style={{
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
height: 50,
}}
/>
</View>