基于ScrollView的Flex布局

Question

我已经为使用Flexbox进行了一段时间的屏幕布局，直到今天我不得不做这个非常简单的布局时，我才遇到任何麻烦：

• 头节(而不是NavBar)。
• content节中包含一个FlatList的ScrollView。
• 一个页脚部分。

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

不管发生什么，内容仍然像它有flex: 1一样。

控制布局的唯一方法是保留内容的flex: 1，并将页脚和页眉设置为flex: 0.33。

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

这里有一个极小例子，它复制这个。

Answer 1

更新2:

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

• 它可能会导致一些奇怪的行为，如onEndReached不断发射。
• 将ListView封装在ScrollView中使父滚动操作主导子滚动操作，这只会导致ScrollView滚动。

好吧，我不知道为什么要这么做，但经过几个小时的努力，我找到了解决办法：

在Update 1中提到的步骤之后，我将以下样式的flexGrow: 0添加到ScrollView中的FlatList中，并且内容变得居中，并减小了内容的大小，直到它完全可以滚动。

基本上，这是生成的代码：

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

这是最后一个工作溶液，如果您愿意的话。

更新1:

通过将ScrollView封装在带有flex: 1的视图中，能够正常地使用Flex控制flex大小(即按照最初的意图使用整数flex值)。

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

这是更新1例。

Answer 2

只要对它进行最小的修改，我就使用了这种风格：

      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

其结果是：

​

​