android - 使用 ScrollView 的 Flex 布局
<p><p>我用 Flexbox 在 React Native 中为屏幕制作布局已经有一段时间了，直到今天我不得不制作这个非常简单的布局时才遇到任何问题:</p>
<ul>
<li><strong>标题</strong>部分(不是导航栏)。</li>
<li>一个 <strong>content</strong> 部分 → 一个带有 FlatList 的 ScrollView。</li>
<li><strong>页脚</strong>部分。</li>
</ul>
<p>我希望内容部分比页眉和页脚大 3 倍，所以我很自然地将 flex 设置为 1(页眉)、3(内容)、1(页脚)。 </p>
<p>无论如何，内容仍然像有 <code>flex: 1</code>。<br/>
我可以按照我想要的方式控制布局的唯一方法是保留内容的 <code>flex: 1</code> 并将页脚和页眉设置为 <code>flex: 0.33</code>。</p>
<p>我怀疑这可能与我设置为 <code>flexGrow: 1, flexShrink: 1</code> 的 ScrollView 的 <strong>contentContainerStyle</strong> 属性有关。</p>
<p>这是一个<strong> <a href="https://snack.expo.io/SJIezEAEm" rel="noreferrer noopener nofollow" title="Snack.io">minimal example</a> </strong> 再现了这一点。</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p><strong>更新 2:</strong> </p>
<p>有人指出，<strong>我不应该使用包装在 ScrollView 中的 ListView</strong>，因为可能会发生以下情况:</p>
<ul>
<li><p>这可能会导致一些奇怪的行为，例如 <code>onEndReached</code> 连续触发。</p></li>
<li><p>将 ListView 包裹在 ScrollView 中，使得父滚动 Action 支配子滚动 Action ，从而仅导致 ScrollView 滚动。</p></li>
</ul>
<hr/>
<p>好的，我不确定为什么会这样，但经过数小时的尝试找到了解决方案:</p>
<p>在<strong>Update 1</strong>中提到的步骤之后，我在<strong>ScrollView<内部的<strong>FlatList</strong>中添加了如下样式<code>flexGrow: 0</code>/strong> 并且内容居中并减小内容的大小直到它变得可滚动也可以完美地工作。</p>
<p>基本上这是生成的代码:</p>
<pre><code>render() {
return (
<View style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
<Text>HEADER</Text>
</View>
<View style={{ flex: 6 }}>// Change this to affect ScrollView size
<ScrollView contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}>
<FlatList
data={listItems}
renderItem={Item}
keyExtractor={(index, item) => item}
style={{ flexGrow: 0 }}// This was the solution to centering
/>
</ScrollView>
</View>
<View style={{ flex: 1 }}>
<Text>FOOTER</Text>
</View>
</View>
);
}
</code></pre>
<p>这是最后的<strong> <a href="https://snack.expo.io/BkZhWo047" rel="noreferrer noopener nofollow" title="Snack.io">Working Solution</a> </strong>如果你想试试的话。</p>
<hr/>
<p><strong>更新 1:</strong> </p>
<p>通过<strong>使用 <code>flex: 1</code> 将 ScrollView 包装在 View 中</strong> 来正常使用 Flex 控制 ScrollView 的大小(即首先使用整数 flex 值)。 </p>
<p>缺点是，如果我将 Scrollable 部分(内容)设置为足够高的 flex 值，使其不再可滚动，则内容不会居中显示。即使应用了 <code>justifyContent: 'center'</code> 也不行。</p>
<p>这里是 <strong> <a href="https://snack.expo.io/BJfkWsC4X" rel="noreferrer noopener nofollow" title="Snack.io">UPDATE 1 example</a> </strong>。</p></p>
<p style="font-size: 20px;">关于android - 使用 ScrollView 的 Flex 布局，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/51620456/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/51620456/
</a>
</p>
页:
[1]