android - 使用 ScrollView 的 Flex 布局

Question

我已经使用 Flexbox 在 React Native 中为屏幕制作布局已有一段时间了，直到今天我不得不制作这个非常简单的布局时才遇到任何麻烦:

• 标题部分(不是导航栏)。
• content 部分 → 内部带有 FlatList 的 ScrollView。
• 页脚部分。

我希望内容部分比页眉和页脚大 3 倍，所以很自然地我将 flex 设置为 1(页眉)、3(内容)、1(页脚)。

不管怎样，内容都保持为 flex: 1。
我可以按照我想要的方式控制布局的唯一方法是保留内容的 flex: 1 并将页脚和页眉都设置为 flex: 0.33。

我怀疑这可能与 ScrollView 的 contentContainerStyle 属性有关，我将其设置为 flexGrow: 1, flexShrink: 1。

这是一个 minimal example 重现了这一点。

Answer 1

更新 2:

有人指出，我不应该使用包含在 ScrollView 中的 ListView，因为可能会发生以下情况:

• 这可能会导致一些奇怪的行为，例如 onEndReached 连续触发。

• 将 ListView 包裹在 ScrollView 内，使父滚动操作支配子滚动操作，从而仅导致 ScrollView 滚动。

---

好吧，我不确定为什么会这样，但经过几个小时的尝试找到了解决方案:

在Update 1中提到的步骤之后，我将以下样式flexGrow: 0 添加到ScrollView< 内的FlatList/strong> 并且内容变得居中并且减小内容的大小直到它变得可滚动也可以完美地工作。

基本上这是结果代码:

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>
    );
  }

这是最后的 Working Solution 如果你想试试。

---

更新 1:

通过使用 flex: 1将 ScrollView 包装在 View 中，正常地使用 Flex 控制 ScrollView 大小(即首先使用整数 flex 值)。

缺点是，如果我将可滚动部分(内容)设置为足够高的弹性值以使其不再可滚动，则内容不会居中显示。即使应用了 justifyContent: 'center' 也不行。

这是 UPDATE 1 example .