React-Native：如何动态设置FlatList的高度并使FlatList填充屏幕？

Question

我正在研究RN，并且我的项目中存在一些问题。 我希望在我的项目

中喜欢这个gif

这是我的代码：

<View style={{ height: Dimensions.get('window').height }}>
    <StatusBar translucent={true} backgroundColor='#00000000' />

    <View>
        ...... something here......
    </View>

    <View style={{ flex: 1}}>
          <FlatList
              data={jobList}
              onEndReached={jobListOnEndReached}
              onEndReachedThreshold={0.1}
              renderItem={renderJobList}
              height={pxToDp(100)}
              onScrollBeginDrag={() => setScroll(true)}
          />
    </View>
</View?

，现在看起来像it。 我希望当我拉起FlatList时，可以使FlatList像 this。 我曾尝试使用“动画”道具，但没有使它起作用的方法。

Answer 1

您可以添加到Flatlist样式height和width中，然后就可以完成工作。查看演示小吃：@abranhe/stackoverflow-56739086

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

const data = [
  { number: 1 },
  { number: 2 },
  { number: 3 },
  { number: 4 },
  { number: 5 },
];

export default () => {
  return (
    <View style={styles.container}>
      <Text>Something Here</Text>
      <View style={styles.content}>
        <FlatList
          data={data}
          renderItem={({ item }) => (
            <Text style={styles.item}>item{item.number}</Text>
          )}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  content: {
    width: '100%',
    height: '80%',
  },
  item: {
    margin: 10,
  },
});

更新

由于问题的作者评论而更新！如果要查看更多项目并能够滚动，只需向数据中添加更多项目即可。