Question

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

Flatlist不知道它的底部在哪里，它与Footer组件重叠。我已经弄乱了它，但无法让它正常工作。

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'
  }
})

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

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

到Flatlist，它的高度与Footer相同，因此会占用该空间。这有效，但似乎不优雅。有没有更好的方法来做到这一点，比如CSS？

感谢名单。

React Native Flatlist重叠页脚？

0 个答案: