0

我想在我的 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}
      />

但运行时不出现页脚。

请提供任何帮助

4

3 回答 3

1

你使用了组件

列表页脚组件

以正确的方式。您需要检查页脚的渲染方法。我遇到了同样的问题，我按照这个例子，它对我有帮助。我希望它会帮助你。

于 2017-07-26T13:46:53.937 回答
1

简单的方法/黑客。在 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}
  />
于 2017-07-26T14:45:42.660 回答
0

如果您想要一个保留在屏幕底部“列表上方”的页脚，那么您只需在 FlatList 之后添加一个视图。

<View>
  <FlatList style={{flex: 1}} />
  <View 
    style={{
      position: 'absolute',
      left: 0,
      right: 0,
      bottom: 0,
      height: 50,
    }}
  />
</View>
于 2017-07-26T16:29:11.453 回答