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無法顯示

回答

相關問題