React native 填充所需的空间，但不要超过React Native中具有FlatList的空间

我在卡片中有一个平面列表，它位于父视图中，具有flex:1。我想用卡片填充所需的空间，但我不希望它溢出父容器。另外，我不希望卡片在空的时候填满可用的空间。如何做到这一点

您可以在此处看到演示：

这是我当前的样式表：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f22",
    margin: 16
  },
  card: {
    backgroundColor: "#2f2",
    marginLeft: 16,
    marginRight: 16,
  },
})

我可以将flex:1设置为card，但当它为空时，它也会填充可用空间

更新：

---

同样有趣的是，在iOS上，平面列表实际上会滚动，但它仍然会溢出容器，溢出量与标题+选项卡的高度相同。

解决方案有点棘手。看看怎么

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

const shortText = "Some text that is not too long to cause problems..."
const longText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porttitor fermentum purus pulvinar congue. In consequat felis metus, ut bibendum urna faucibus non. Suspendisse id nisl massa. Quisque vitae ante sodales, ornare mauris ut, semper lectus. Quisque cursus elit vel justo cursus, non venenatis magna auctor. Aenean scelerisque venenatis ultrices. Etiam a tempor urna. Fusce tristique molestie purus fermentum euismod.

Ut eleifend neque ut fermentum cursus. Suspendisse id mattis purus, non varius eros. Vivamus vulputate pharetra lorem, eget tempor est sollicitudin eget. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In iaculis dictum blandit. Donec vel consequat augue. Suspendisse dictum accumsan risus, sed elementum purus egestas eu. Aenean aliquet eros vel ex congue dignissim. Suspendisse eu sapien sapien. Aliquam id nisi aliquam, faucibus urna ac, pharetra libero. Integer maximus vitae metus auctor condimentum. Donec sit amet mauris in arcu bibendum maximus.`

let currentText = shortText

export default function App() {
  const [value, setValue] = useState(shortText); 

  return (
    <View style={{height: "100%", width: "100%", position: "absolute"}}>
      <View style={styles.container}>
        <Text style={styles.title}>TITLE</Text>
        <View style={styles.card}>
          <View style={styles.tabs}>
            <TouchableOpacity onPress={()=>setValue(shortText)} style={styles.button}><Text>Short</Text></TouchableOpacity>
            <TouchableOpacity onPress={()=>setValue(longText)} style={styles.button}><Text>Long</Text></TouchableOpacity>
          </View>
          <FlatList data={value.split(" ")} renderItem={(i)=><Text style={{backgroundColor: "#2f2",}}>{i.item}</Text>} />
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#FF3300",
    margin: 16
  },
  card: {
    marginLeft: 16,
    marginRight: 16,
    flex: 1,            // Added
    bottom: 5           // Added   
  },
  tabs: {
    flexDirection: "row"
  },
  title: {
    margin: 16,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  button: {
    height: 40,
    flex: 1,
    alignItems: "center",
    padding: 12,
    backgroundColor: "#fff"
  },
});

import React，{useState}来自“React”；
从“react native”导入{文本、视图、样式表、TouchableOpacity、平面列表}；
const shortText=“一些不会太长而导致问题的文本…”
const longText=`Lorem ipsum door sit amet，concetetur adipsicing elit。普氏肺结核发酵门。在梅特斯，我们的目标是我们的未来。Suspendisse id nisl massa。苏打菜前的生活、奥纳·莫里斯·乌特、塞姆珀·莱克图斯。奎斯克·库苏斯（Quisque cursus Elite vel justo cursus），非威尼斯大拍卖商。埃尼安威尼斯十字勋章。我是临时的乌尔纳人。发酵脓杆菌。
这是一种发酵剂。Suspendisse id mattis purus，非varius eros。这是一种暂时的解决办法。产于蒙特斯的天然对虾和马格纳斯虎鲸（Orci varius natoque penatibus et magnis），以及印度虎鲸（nascetur ridiculus mus）。在iaculis dictum blandit中。不要在奥古斯举行会议。累积性营养素，是欧盟的营养素。埃尼安·阿利奎特·厄洛斯是康格贵族。Suspendisse eu sapien sapien。Aliquam id nisi Aliquam，faucibus urna ac，pharetra libero。Integer maximus vitae metus auctor调味品。不要坐在阿穆特·莫里斯的大拱门里`
让currentText=shortText
导出默认函数App（）{
const[value，setValue]=使用状态（短文本）；
返回(
标题
setValue（shortText）}style={styles.button}>Short
setValue（longText）}style={styles.button}>Long
{i.item}}/>
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“FF3300”，
差额：16
},
卡片：{
marginLeft:16，
marginRight:16，
flex:1，//已添加
底部：5//已添加
},
选项卡：{
flexDirection：“行”
},
标题：{
差额：16，
尺码：18，
fontWeight:'粗体'，
textAlign:'中心'，
},
按钮：{
身高：40，
弹性：1，
对齐项目：“中心”，
填充：12，
背景颜色：“fff”
},
});

刚刚添加了两行代码，将

backgroundColor

样式从

card

移动到

Text

组件

结果,

---

谢谢您的回答，很抱歉不清楚。在我的实际程序中，有必要在卡中有背景，所以我不能向它添加flex。F.e.在某些情况下，我还需要在FlatList之后添加UI元素。