React Native - 由内容设置视图高度答案

【问题标题】：React Native - Have view height set by contentReact Native - 由内容设置视图高度
【发布时间】：2022-04-07 19:43:53
【问题描述】：

由于 flex: 1 属性，我有一个视图和一个滚动视图当前占据了整个高度。我试图弄清楚这个视图如何只占用滚动视图中的内容占用的空间量。这可能吗？

<View style={{ flex: 1 }}>      
  <ScrollView style={{ flexDirection: 'row', flex: 1 }}>...</ScrollView>
</View>

【问题讨论】：

【解决方案1】：

在 View 和 ScrollView 上设置 style={{ height: 'auto', flex: 0 }} 有效。

【讨论】：

RN 没有高度：'auto'
那么这里发生了两件事之一。 1) height 属性被完全忽略，这仅适用于 flex: 0，或者 2) 设置无效的 height 属性触发了一些回退高度，使其意外地按我想要的方式工作。

【解决方案2】：

将此添加到文本组件：

flexShrink: 1

你可能还需要

flexWrap: "wrap"

【讨论】：

【解决方案3】：

添加height: "auto", alignSelf: 'flex-start'

【讨论】：

【解决方案4】：

从 View 中移除 flex 1，然后如果你将 ScrollView 的高度设置为 500，那么 View 也将是 500。

【讨论】：