OGeek|极客世界-中国程序员成长平台

标题: android - 使用 ScrollView 的 Flex 布局 [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-11 20:25
标题: android - 使用 ScrollView 的 Flex 布局

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

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

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

无论如何，内容仍然像有 flex: 1。
我可以按照我想要的方式控制布局的唯一方法是保留内容的 flex: 1 并将页脚和页眉设置为 flex: 0.33。

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

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

---

Best Answer-推荐答案

更新 2:

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

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

• 将 ListView 包裹在 ScrollView 中，使得父滚动 Action 支配子滚动 Action ，从而仅导致 ScrollView 滚动。

---

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

在Update 1中提到的步骤之后，我在ScrollView<内部的FlatList中添加了如下样式flexGrow: 0/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 值)。

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

这里是 UPDATE 1 example 。

关于android - 使用 ScrollView 的 Flex 布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51620456/

---

欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://ogeek.cn/)

Powered by Discuz! X3.4