Javascript Flatlist赢得'；不能填满整个屏幕

所以我对反应本地和移动开发是新手， 我有一个平面列表，我想在整个屏幕上展开它（参见我在下面添加的图片），但我似乎无法实现它

这是我的密码

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity,Animated, Dimensions } from "react-native";

import { GestureHandler } from "expo";
import { ListItem, List } from "react-native-elements";

import { FlatList, RectButton } from 'react-native-gesture-handler';

import AppleStyleSwipeableRow from './AppleStyleSwipeableRow';
import GmailStyleSwipeableRow from './GmailStyleSwipeableRow';
import Swipeable from 'react-native-gesture-handler/Swipeable';

const Row = ({ item }) => (
  <RectButton style={styles.rectButton} onPress={() => alert(item.from)}>
    <Text style={styles.fromText}>{item.from}</Text>
    <Text numberOfLines={2} style={styles.messageText}>
      {item.message}
    </Text>
    <Text style={styles.dateText}>
       {'❭'}
    </Text>
  </RectButton>
);

const SwipeableRow = ({ item, index }) => {

    return (
      <AppleStyleSwipeableRow >
        <Row item={item} />
      </AppleStyleSwipeableRow>
    );


};

export default class Example extends Component {
  render() {
    return (
      <View style={{ flex: 1}}>
      <FlatList
        data={DATA}
        ItemSeparatorComponent={() => <View style={styles.separator} />}
        renderItem={({ item, index }) => (
          <SwipeableRow  
            item={item} index={index} />
        )}
        keyExtractor={(item, index) => `message ${index}`}
      />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  rectButton: {
    flex: 1,
    paddingVertical: 10,
    paddingHorizontal: 20,
    justifyContent: 'space-between',
    flexDirection: 'column',
    backgroundColor: '#2C2F33',
  },
  separator: {
    backgroundColor: '#99AAB5',
    height: StyleSheet.hairlineWidth,
  },
  fromText: {
    fontWeight: 'bold',
    backgroundColor: 'transparent',
    color: '#FFFFFF'
  },
  messageText: {
    color: '#999',
    backgroundColor: 'transparent',
  },
  dateText: {
    backgroundColor: 'transparent',
    position: 'absolute',
    right: 20,
    top: 10,
    color: 'pink', //'#7289DA',
    fontWeight: 'bold',
  },
});

const DATA = [
  {
    from: "D'Artagnan",
    when: '3:11 PM',
    message:
      'Unus pro omnibus, omnes pro uno. Nunc scelerisque, massa non lacinia porta, quam odio dapibus enim, nec tincidunt dolor leo non neque',
  },
  {
    from: 'Aramis',
    when: '11:46 AM',
    message:
      'Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus hendrerit ligula dignissim maximus aliquet. Integer tincidunt, tortor at finibus molestie, ex tellus laoreet libero, lobortis consectetur nisl diam viverra justo.',
  },
  {
    from: 'Athos',
    when: '6:06 AM',
    message:
      'Sed non arcu ullamcorper, eleifend velit eu, tristique metus. Duis id sapien eu orci varius malesuada et ac ipsum. Ut a magna vel urna tristique sagittis et dapibus augue. Vivamus non mauris a turpis auctor sagittis vitae vel ex. Curabitur accumsan quis mauris quis venenatis.',
  }/*,
  {
    from: 'Porthos',
    when: 'Yesterday',
    message:
      'Vivamus id condimentum lorem. Duis semper euismod luctus. Morbi maximus urna ut mi tempus fermentum. Nam eget dui sed ligula rutrum venenatis.',
  },
  {
    from: 'Domestos',
    when: '2 days ago',
    message:
      'Aliquam imperdiet dolor eget aliquet feugiat. Fusce tincidunt mi diam. Pellentesque cursus semper sem. Aliquam ut ullamcorper massa, sed tincidunt eros.',
  },
  {
    from: 'Cardinal Richelieu',
    when: '2 days ago',
    message:
      'Pellentesque id quam ac tortor pellentesque tempor tristique ut nunc. Pellentesque posuere ut massa eget imperdiet. Ut at nisi magna. Ut volutpat tellus ut est viverra, eu egestas ex tincidunt. Cras tellus tellus, fringilla eget massa in, ultricies maximus eros.',
  },
  {
    from: "D'Artagnan",
    when: 'Week ago',
    message:
      'Aliquam non aliquet mi. Proin feugiat nisl maximus arcu imperdiet euismod nec at purus. Vestibulum sed dui eget mauris consequat dignissim.',
  },
  {
    from: 'Cardinal Richelieu',
    when: '2 weeks ago',
    message:
      'Vestibulum ac nisi non augue viverra ullamcorper quis vitae mi. Donec vitae risus aliquam, posuere urna fermentum, fermentum risus. ',
  },*/
];

import React，{Component}来自'React'；
从“react native”导入{视图、文本、样式表、TouchableOpacity、动画、维度}；
从“expo”导入{GestureHandler}；
从“react native elements”导入{ListItem，List}；
从“反应本机手势处理程序”导入{FlatList，RectButton}；
从“./applestyleswipebelrow”导入applestyleswipebelrow；
从“./gmailstyleswipeblerow”导入gmailstyleswipeblerow；
从“反应本机手势处理程序/Swipeable”导入Swipeable；
常量行=（{item}）=>(
警报（item.from）}>
{item.from}
{item.message}
{'❭'}
);
常量SwipeableRow=（{item，index}）=>{
返回(

基本上我想要的是平面列表填补空白我真的不知道问题出在哪里，因为我尝试添加了
flex:1
尝试以下方法：

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity,Animated, Dimensions } from "react-native";

import { GestureHandler } from "expo";
import { ListItem, List } from "react-native-elements";

import { FlatList, RectButton } from 'react-native-gesture-handler';

import AppleStyleSwipeableRow from './AppleStyleSwipeableRow';
import GmailStyleSwipeableRow from './GmailStyleSwipeableRow';
import Swipeable from 'react-native-gesture-handler/Swipeable';

const Row = ({ item }) => (
  <RectButton style={styles.rectButton} onPress={() => alert(item.from)}>
    <Text style={styles.fromText}>{item.from}</Text>
    <Text numberOfLines={2} style={styles.messageText}>
      {item.message}
    </Text>
    <Text style={styles.dateText}>
       {'❭'}
    </Text>
  </RectButton>
);

const SwipeableRow = ({ item, index }) => {

    return (
      <AppleStyleSwipeableRow >
        <Row item={item} />
      </AppleStyleSwipeableRow>
    );


};

export default class Example extends Component {
  render() {
    return (
      <View style={{ flex: 1}}>
      <FlatList
        contentContainerStyle={{ flexGrow: 1 }}
        data={DATA}
        ItemSeparatorComponent={() => <View style={styles.separator} />}
        renderItem={({ item, index }) => (
          <SwipeableRow  
            item={item} index={index} />
        )}
        keyExtractor={(item, index) => `message ${index}`}
      />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  rectButton: {
    flex: 1,
    paddingVertical: 10,
    paddingHorizontal: 20,
    justifyContent: 'space-between',
    flexDirection: 'column',
    backgroundColor: '#2C2F33',
  },
  separator: {
    backgroundColor: '#99AAB5',
    height: StyleSheet.hairlineWidth,
  },
  fromText: {
    fontWeight: 'bold',
    backgroundColor: 'transparent',
    color: '#FFFFFF'
  },
  messageText: {
    color: '#999',
    backgroundColor: 'transparent',
  },
  dateText: {
    backgroundColor: 'transparent',
    position: 'absolute',
    right: 20,
    top: 10,
    color: 'pink', //'#7289DA',
    fontWeight: 'bold',
  },
});

const DATA = [
  {
    from: "D'Artagnan",
    when: '3:11 PM',
    message:
      'Unus pro omnibus, omnes pro uno. Nunc scelerisque, massa non lacinia porta, quam odio dapibus enim, nec tincidunt dolor leo non neque',
  },
  {
    from: 'Aramis',
    when: '11:46 AM',
    message:
      'Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus hendrerit ligula dignissim maximus aliquet. Integer tincidunt, tortor at finibus molestie, ex tellus laoreet libero, lobortis consectetur nisl diam viverra justo.',
  },
  {
    from: 'Athos',
    when: '6:06 AM',
    message:
      'Sed non arcu ullamcorper, eleifend velit eu, tristique metus. Duis id sapien eu orci varius malesuada et ac ipsum. Ut a magna vel urna tristique sagittis et dapibus augue. Vivamus non mauris a turpis auctor sagittis vitae vel ex. Curabitur accumsan quis mauris quis venenatis.',
  }/*,
  {
    from: 'Porthos',
    when: 'Yesterday',
    message:
      'Vivamus id condimentum lorem. Duis semper euismod luctus. Morbi maximus urna ut mi tempus fermentum. Nam eget dui sed ligula rutrum venenatis.',
  },
  {
    from: 'Domestos',
    when: '2 days ago',
    message:
      'Aliquam imperdiet dolor eget aliquet feugiat. Fusce tincidunt mi diam. Pellentesque cursus semper sem. Aliquam ut ullamcorper massa, sed tincidunt eros.',
  },
  {
    from: 'Cardinal Richelieu',
    when: '2 days ago',
    message:
      'Pellentesque id quam ac tortor pellentesque tempor tristique ut nunc. Pellentesque posuere ut massa eget imperdiet. Ut at nisi magna. Ut volutpat tellus ut est viverra, eu egestas ex tincidunt. Cras tellus tellus, fringilla eget massa in, ultricies maximus eros.',
  },
  {
    from: "D'Artagnan",
    when: 'Week ago',
    message:
      'Aliquam non aliquet mi. Proin feugiat nisl maximus arcu imperdiet euismod nec at purus. Vestibulum sed dui eget mauris consequat dignissim.',
  },
  {
    from: 'Cardinal Richelieu',
    when: '2 weeks ago',
    message:
      'Vestibulum ac nisi non augue viverra ullamcorper quis vitae mi. Donec vitae risus aliquam, posuere urna fermentum, fermentum risus. ',
  },*/
];

import React，{Component}来自'React'；
从“react native”导入{视图、文本、样式表、TouchableOpacity、动画、维度}；
从“expo”导入{GestureHandler}；
从“react native elements”导入{ListItem，List}；
从“反应本机手势处理程序”导入{FlatList，RectButton}；
从“./applestyleswipebelrow”导入applestyleswipebelrow；
从“./gmailstyleswipeblerow”导入gmailstyleswipeblerow；
从“反应本机手势处理程序/Swipeable”导入Swipeable；
常量行=（{item}）=>(
警报（item.from）}>
{item.from}
{item.message}
{'❭'}
);
常量SwipeableRow=（{item，index}）=>{
返回(
);
};
导出默认类示例扩展组件{
render（）{
返回(
}
renderItem={（{item，index}）=>(
)}
keyExtractor={（项，索引）=>`message${index}`}
/>
);
}
}
const styles=StyleSheet.create({
矩形按钮：{
弹性：1，
填充垂直：10，
水平方向：20，
justifyContent:'之间的空间'，
flexDirection:'列'，
背景颜色：“#2C2F33”，
},
分离器：{
背景颜色：“#99AAB5”，
高度：StyleSheet.hairlineWidth，
},
fromText:{
fontWeight:'粗体'，
背景色：“透明”，
颜色：“#FFFFFF”
},
messageText:{
颜色：“#999”，
背景色：“透明”，
},
日期文本：{
背景色：“透明”，
位置：'绝对'，
右:20,，
前10名，
颜色：“粉色”/“#7289DA”，
fontWeight:'粗体'，
},
});
常数数据=[
{
来自：“达塔尼安”，
“下午3:11”时，
信息：
“联合国大学支持综合大学，世界大学支持联合国大学，修女权杖，马萨非拉齐尼亚港，阿迪奥·达皮布斯·埃尼姆广场，nec tincidunt dolor leo non-neque”，
},
{
来自：“Aramis”，
“上午11:46”时，
信息：
“虎鲸和乌龟的前庭位于同侧前庭；虎鲸和乌龟的前庭位于同侧前庭；虎鲸的前庭位于同侧前庭；虎鲸的前庭位于同侧前庭；虎鲸的前庭位于同侧前庭；虎鲸的前庭位于同侧前庭；虎鲸的前庭位于同侧前庭；虎鲸的前庭位于同侧前庭；虎鲸的前庭位于同侧前庭；虎鲸的前庭位于同侧前庭，
},
{
来自：“Athos”，
当“早上6:06”时，
信息：
“非ArcuUllamcorper，eleifend velit eu，tristique metus.Duis id sapien eu orci varius malesuada et ac ipsum.但这是一个巨大的矢状体和奥古斯都。非毛里斯人是一个turpis拍卖人，其生命来自于威尼斯人。”，
}/*,
{
来自：“波托斯”，
当‘昨天’，
信息：
“Vivamus id调味品lorem.Duis semper euismod luctus.Morbi maximus urna ut mi tempus fermentum.Nam eget dui sed rutrum venenatis.”，
},
{
来自《多梅斯托斯》，
当：“2天前”，
信息：
“这是一种威胁，是一种仇恨，是一种直径较小的诅咒，是一种威胁，是一种厄洛斯的诅咒。”，
},
{
出自《黎塞留红衣主教》，
当：“2天前”，
信息：
“Pellentsque id quam ac tortor Pellentsque tempor tristique ut nunc.Pellentsque posuere ut massa eget imperdiet.在nisi magna.我们在维韦拉（viverra）和维韦拉（Evolpat tellus）、欧盟（eu-egestas ex tincidut）工作。Cras tellus tellus、fringilla eget massa in、ultricies maximus eros。”，
},
{
来自：“达塔尼安”，
当‘一周前’时，
信息：
“我的不在场证明了我在普卢斯（purus）的最高统治权。前庭在两个月内被授予了最高荣誉。”，
},
{
出自《黎塞留红衣主教》，
当：“2周前”，
信息：
“非奥古斯·维韦拉·乌兰科佩尔·奎斯·多内克·维塔尔·里苏斯·阿利奎姆、波苏尔·乌纳·里苏斯、里苏斯·里苏斯的前庭。”，
},*/
];
tbh我不知道为什么其他选项不起作用，但我找到了解决方法，正如我提到的；
我将
paddingVertical:10
更改为
rectButton{}
style
Add
flexGrow:1
中的
paddingVertical:10
。@KishanBharda我添加了
style={flexGrow:1}
但什么都没有发生！！我的意思是
style={flexGrow:1，flexGrow:1}}
@KishanBharda同样，没什么，我可以做一个变通，在我的
rectButton:{}
样式定义中更改
垂直填充：“25%”
，但我希望平面列表在所有屏幕上平均分布。这并没有解决问题，请检查我下面的答案，但无论如何感谢您的贡献