如何使用 FlexBox 制作粘性页脚并做出反应

Question

我正在使用带有 Flexbox 的 react-native 路由器。我想展示 FlatList 最后采用全屏和粘性页脚。我尝试为 FlatList 指定 flexGrow: 1，为 View 页脚指定 flexShrink: 0，但它不起作用。我正在 Expo 中构建应用并在 iPhone 上查看结果。

import React, {Component} from 'react';
import {
  Text,
  View,
  FlatList,
} from 'react-native'
import {Provider} from 'react-redux'
import {NativeRouter, Route, Link} from 'react-router-native'

export default class App extends Component {
  render() {
    return <NativeRouter>
      <View style={{
        display: "flex",
        flexDirection: "column",
        padding: 10,
      }}>
        <View style={{
          display: "flex",
          flexDirection: 'row',
          justifyContent: 'space-around'
        }}>
          <Link
              to="/lobby"
              underlayColor='#f0f4f7'
              style={{
                flex: 8,
                alignItems: 'center',
                padding: 10,
              }}>
            <Text>Lobby</Text>
          </Link>
          <Link
              to="/"
              underlayColor='#f0f4f7'
              style={{
                flex: 2,
                alignItems: 'center',
                padding: 10,
              }}>
            <Text>Home</Text>
          </Link>
        </View>

        <Route exact path="/" component={Home}/>
        <Route path="/lobby" component={Lobby}/>
      </View>
    </NativeRouter>
  }
}

const Home = () => (
    <Text>
      Home
    </Text>
);


class Lobby extends Component {
  render() {
    return <View style={{
      flexGrow: 1,
      flexDirection: "column",
      // justifyContent: "space-between"
    }}>
      <FlatList
          style={{
            flexGrow: 1,
          }}
          data={[
            {key: 'Spring Game'},
            {key: 'Summer Game'},
            {key: 'Fall Game'},
            {key: 'Winter Game'},
          ]}
          renderItem={({item}) => <Text style={{
            display: "flex",
            flex: 1,
            padding: 10,
            fontSize: 18,
            height: 44,
            alignContent: "center"
          }}>{item.key}</Text>}
      />

      <View style={{
        display: "flex",
        flexDirection: "row",
        backgroundColor: "#848441",
        flexShrink: 0,
      }}>
        <Text style={{
          flex: 6,
          alignSelf: "flex-end"
        }}>Footer</Text>
      </View>
    </View>
  }
}

Answer 1

首先，祝你好运 :) 如果您的“粘性逻辑”不像“始终停留在底部”那么简单，您将不得不开始聆听滚动和调整大小...

无论如何，我的 react 应用程序需要一个 Sticky 组件，这就是它对我的工作方式。它的 react-dom 有点不同，但就 CSS 而言应该没问题。

首先，将其父元素设置为position: "relative"，这将允许其子元素的位置绝对基于父元素。 这个父元素应该环绕所有可用区域。 所以你父 View 组件的样式几乎没问题，如果它还没有占据所有可用区域，只需添加 flexBasis: 0 和 position: "relative"。

将 Sticky 组件本身（子视图）设置为display: "block"，将position: "absolute" 和overflow 设置为除可见之外的任何内容。从技术上讲，它已经很粘了。 然后将bottom: 0 添加到您的sticky 中，您的组件应该已经粘在底部了——现在您只需要使用您喜欢的任何属性或工具来管理它的宽度和水平位置。

我尝试仅使用 flexbox 规则来解决此问题，但似乎解决此问题的最佳方法是 position="relative" 和 position="absolute"

您还应该注意，在此之后，Sticky box 真正有趣的部分开始了，因为根据您的 Sticky 的实际位置，您可能需要添加一些 js 来处理特殊情况。示例：我认为现在粘性框将覆盖您的内容。应在页面底部添加额外的空白区域，以便您实际上可以向下滚动到足以看到内容的底部。

附加说明：我知道如果你将display: "flex" 和position: "relative" 结合起来，它会以一种特殊的方式处理。不确定到底有什么不同，但是当分配 position="relative" 时，block 和 flex 的行为有点不同。如果您在布局中发现异常，请尝试在您的 flex 视图和块粘性之间添加一个包装器，一个块/相对包装器，以规范行为。

我的课程被简化了，这是一个粘性侧边栏：

.StickyBox {
  overflow: auto;
  position: absolute;
  height: inherit;
}

.sidebarWrapper {
  flex: 1;
  position: relative;
}