React Native Flat List: Space Flatlist children 均匀地适应当前屏幕高度

Question

我正在尝试渲染 N 数量的 Flatlist 组件，并让它们完全适合屏幕的其余部分，而无需滚动。这就是我的应用程序目前的样子。

我有我的 Flatlist children，它们是我在智能助手 Header 下方呈现的用例。我需要 flatlist 组件来完美适合 N 个用例的当前用户屏幕。在这种情况下，还有很多空的 space，我希望 N 个 children 能够均匀地填充。

这是我的 App.js 文件

 return (
    <View style = {styles.container}>
      <Header appName='Intelligent Assistant'/>
      <View > 
        <FlatList 
          data = {useCases} 
          renderItem = {({item}) => <Usecase useCase = {item} />}
          />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex : 1 ,
    paddingTop : 60,
  },
});

这是我的 Usecase.js 文件

const Usecase = ({useCase}) => {
    return (
        <TouchableOpacity style = {styles.useCase}>
            <View style = {styles.useCaseView}>
                <Text style = {styles.useCaseText}>{useCase.description}</Text>
            </View>
        </TouchableOpacity>
    )
}

const styles = StyleSheet.create({
    useCase : {
        padding : 15,
        backgroundColor : '#f8f8f8',
        borderBottomWidth : 1,
        borderColor : '#eee',
    },
    useCaseView : {
        flexDirection : 'column',
        alignItems:'center',
        justifyContent:'space-evenly',
    },
});

Answer 1

import {Dimensions} from ‘react-native’;
const deviceheight = Dimensions.get('window').height;

const Usecase = ({useCase}) => {
    return (
        <TouchableOpacity style = {[styles.useCase,{height: (deviceheight - YOUR_HEADER_BAR_HEIGHT)/useCases.length}]}>
            <View style = {styles.useCaseView}>
                <Text style = {styles.useCaseText}>{useCase.description}</Text>
            </View>
        </TouchableOpacity>
    )
}

由于您使用的是 {borderBottomWidth : 1}，因此您必须在该高度计算中减去行数。

React Native Flat List: Space Flatlist children 均匀地适应当前屏幕高度

React Native Flat List: Space Flatlist children evenly to fit the current screen height

react-native

react-native-flatlist