React native 反应本机平面列表重叠页脚？

我正在开始使用React Native并编写一个应用程序。我的布局/样式有问题。这是一个简化的版本，以显示我的困难

平面列表不知道它的底部在哪里，它与

页脚

组件重叠。我把它弄得乱七八糟，但不能让它正常工作

import React, { Component } from 'react'
import { FlatList, StyleSheet, Text, View } from 'react-native'

class Header extends Component {
  render() {
    return (
      <View style={styles.headerContainer}>
        <Text style={styles.headerText}> </Text>
        <Text style={styles.headerText}>
          This is the page header!
        </Text>
      </View>
    )
  }
}

class Footer extends Component {
  render() {
    return (
      <View style={styles.footerContainer}>
        <Text style={styles.footerText}>
          This is the page footer!
        </Text>
      </View>
    )
  }
}

let myData = [];

for (let i=1; i<=30; i++) {
  myData.push({ key: ('My item ' + i) })
}

export default class App extends Component {

  render() {
    return (
      <View style={styles.container}>
        <Header />

          <View style={styles.listWrapper}>
            <FlatList
              contentContainerStyle={styles.listContainer}
              data={myData}
              renderItem={({item}) => <Text style={styles.listItem} >{item.key}</Text>}
              contentInset={{top: 0, left: 0, bottom: 50, right: 0}}

            />
          </View>

        <Footer />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'pink'
  },


  headerContainer: {
    backgroundColor: '#333',
    height: 60,
  },
  headerText: {
    textAlign: 'center',
    fontSize: 20,
    color: '#999'
  },

  listWrapper: {
    flex: 1
  },
  listContainer: {
    backgroundColor: 'lightblue',
  },
  listItem: {
    color: 'red',
    fontSize: 28
  },


  footerContainer: {
    backgroundColor: '#333',
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    flex: 1,
    height: 20
  },
  footerText: {
    textAlign: 'center',
    fontSize: 14,
    color: '#999'
  }
})

import React，{Component}来自“React”
从“react native”导入{FlatList，StyleSheet，Text，View}
类头扩展组件{
render（）{
返回(
这是页眉！
)
}
}
类页脚扩展组件{
render（）{
返回(
这是页脚！
)
}
}
让myData=[]；
for（设i=1；i
)
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“粉色”
},
负责人：{
背景颜色：“#333”，
身高：60，
},
标题文字：{
textAlign:'中心'，
尺寸：20，
颜色：“#999”
},
列表包装器：{
弹性：1
},
列表容器：{
背景颜色：“浅蓝色”，
},
列表项：{
颜色：“红色”，
尺寸：28
},
页脚容器：{
背景颜色：“#333”，
位置：'绝对'，
左:0,，
右:0,，
底部：0，
弹性：1，
身高：20
},
页脚文本：{
textAlign:'中心'，
尺寸：14，
颜色：“#999”
}
})

我唯一的解决方案是添加道具：

ListFooterComponent={<View style={{ height: 20 }} />}

ListFooterComponent={}

对于平面列表，将其设置为与

页脚

相同的高度，因此它将占用该空间。这是可行的，但似乎不雅观。有没有更好的方法，比如CSS

---

塔克斯

您的页脚不需要

位置：绝对
。如果对页脚使用
flex:1
，它将与
列表包装器的高度相等。为了理解flex属性，您应该先阅读flex css，但我不希望页脚等于listWrapper的高度。我希望顶部有一个小的固定高度页眉，底部有一个小的固定高度页脚，平面列表可以智能地占据中间的剩余空间。我已经阅读了RN和flex文档，但我还没有足够的智慧来理解如何做到这一点。如果你有一个聪明的flex解决方案，请让我知道，但你的建议不是我想要的。仅供参考：谢谢，这很有效。你在最初的回复中说“如果你对页脚使用flex:1，它将与listWrapper的高度相等。”这让我很困惑，但你的例子澄清了这一点。我也不知道常量对象，所以也谢谢你的技巧。谢谢