使用 ScrollView 的 Flex 布局答案

【问题标题】：Flex layout with ScrollView使用 ScrollView 的 Flex 布局
【发布时间】：2019-01-08 06:25:33
【问题描述】：

我用 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 复制了这个。

【问题讨论】：

标签： android ios react-native flexbox scrollview

【解决方案1】：

对我来说只需要很少的修改，我就使用了这种风格：

      const styles = StyleSheet.create({
    screen: {
      backgroundColor: 'lightgray',
      flex: 1,
    },
    header: {
      flex: 0.33,
      backgroundColor: 'lightblue',
      justifyContent: 'center',
      alignItems: 'center',
    },
    scrollView: {
      flex: 1,
    },
    footer: {
      backgroundColor: 'lightpink',
      flex: 0.33,
      alignItems: 'center',
      justifyContent: 'center',
    },
  });

完整代码>>>https://snack.expo.io/Hk9tbHR4Q

这是结果：

【讨论】：

请注意，我已经说过将页眉和页脚 flex 更改为小数确实有效，但我想阻止这样做，因为它非常乏味。最好能发现它在 ScrollView 中的行为为何如此。
@Franch 现在我明白了你的问题......这是因为 ScrollView 无法自行决定其大小（这对于 ScrollView 来说是特殊的，始终具有 flex: 1）。它必须等待其他组件选择它们的占用（1、3、0.33...），然后 scrollView 完成剩下的！

【解决方案2】：

更新 2：

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

这可能会导致一些奇怪的行为，例如onEndReached 连续触发。
将 ListView 包裹在 ScrollView 中，使父滚动动作支配子滚动动作，从而仅导致 ScrollView 滚动。

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

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

基本上这是生成的代码：

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 包装在视图中，正常地使用 Flex 控制 ScrollView 的大小（即首先使用整数 flex 值）。

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

这里是 UPDATE 1 example。

【讨论】：