FlatListFooter 无法显示答案

【问题标题】：FlatListFooter can't be displayedFlatListFooter 无法显示
【发布时间】：2017-07-26 13:19:43
【问题描述】：

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

但运行时没有出现页脚。

请帮忙

【问题讨论】：

你的意思是粘页脚吗？
是的，我的意思是这个

标签： react-native react-native-flatlist

【解决方案1】：

你使用了组件

列表页脚组件

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

【讨论】：

我正在关注这个文档。

【解决方案2】：

简单的方法/破解。在 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}
  />

【讨论】：

【解决方案3】：

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

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

【讨论】：

谢谢。我想知道如何从右到左显示项目？
@SihemHcine 将以下样式属性添加到要从右到左显示的项目的父项：style={{ flexDirection: 'row-reverse' }}