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

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

如果你可以修改你的menuData结构，添加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中使用它，就像这样

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

Answer 3

如果您想要一个位于屏幕底部“页面上方”的页脚，那么您只需在FlatList之后添加一个View。

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

无法显示FlatListFooter

3 个答案: