FlatListFooter 无法显示

Question

我想为我的 flatList 添加页脚：我试试这个代码：

 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

您使用了组件

ListFooterComponent

以正确的方式。您需要检查页脚的渲染方法。我遇到了同样的问题，我以 this 为例，它对我有帮助。希望对你有所帮助。

Answer 2

简单way/hack。在 menuData 数组中，您只需向子对象添加一个标志（我调用）以指示它是最后一项。例如：

如果您可以修改 menuData 结构，添加 lastItem 属性 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 中使用它

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

Answer 3

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

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

FlatListFooter 无法显示

FlatListFooter can't be displayed

react-native

react-native-flatlist