FlatListFooter无法显示

我想页脚添加到我的flatList：我试试这个代码：FlatListFooter无法显示

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} 
     />

但运行时，会出现没有页脚。

任何帮助，请

来源

2017-07-26 Sihem Hcine

你的意思是粘脚？ – digit

是的，我的意思是这个文件 –

如果您希望保留在屏幕底部的页脚“上面”该列表，那么你可以在FlatList之后添加一个View。

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

来源

2017-07-26 16:29:11 gtfargo

thankx。我想知道如何显示从右到左的项目？ –

你在正确的方式使用的成分

ListFooterComponent

。你需要检查你的页脚渲染方法。我面临同样的问题，我遵循this的例子，它可以帮助我。我希望它能帮助你。

来源

2017-07-26 13:46:53

。 –

简单的方法/黑客。在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-26 14:45:42 digit

FlatListFooter无法显示

回答

相关问题