将组件设置为在屏幕上“浮动”而不占用空间答案

【问题标题】：Setting a component to "float" on screen and not take space将组件设置为在屏幕上“浮动”而不占用空间
【发布时间】：2020-09-10 18:07:24
【问题描述】：

我正在尝试在 React Native 中创建一个应用程序，我有一个屏幕，其中有标题、平面列表和卡片组件。

我在同一个安全区域视图中有平面列表和卡片组件。我希望平面列表占据整个屏幕（从标题下方开始）和卡片组件“浮动”在那里。

目前，我真的不知道该怎么做（React Native 的新手），因为弹性框（我猜）卡片组件占据了屏幕的一部分，所以列表从标题下方开始，并且在卡片上方结束。

这就是现在的样子：https://imgur.com/a/ZIfW8OU

我希望列表在卡片组件后面继续。

这就是我现在的布局方式：

return (
    <>
      <SafeAreaView style={styles.meetingDetailsContainer}>
        <ListHeader meeting={meeting} />
 
        <View style={{flex: 1, justifyContent: 'center'}}>
          {members.length > 0 ? (
            <FlatList
              data={members}
              renderItem={renderItem}
              keyExtractor={(item) => item.id}
              showsVerticalScrollIndicator={false}
              onScroll={(event) =>
                setInfoCardHeight(-event.nativeEvent.contentOffset.y)
              }
            />
          ) : (
            <Text style={styles.noParticipantsText}>No participants yet.</Text>
          )}
        </View>
        <View style={{bottom: infoCardHeight, backgroundColor: 'transparent'}}>
          <InfoCard meeting={meeting} />
        </View>
      </SafeAreaView>
    </>
)

我需要将列表放在卡片后面，因为我让卡片组件在用户滚动时“消失”，但随后我在屏幕上有一个白色空白区域，因为列表在卡片开始的地方结束。

【问题讨论】：

标签： react-native

【解决方案1】：

当您需要在另一个之上渲染某些东西时，请使用绝对位置而不是默认的相对位置。

    <View style={{ position: 'absolute', bottom: 0, top: infoCardHeight, left: 0, right: 0 }}>
      <InfoCard meeting={meeting} />
    </View>

当card wrapper不占用父View的相对空间时，FlatList的wrapper View会自动展开到屏幕底部。

【讨论】：