html - 如何使用 FlexBox 制作粘性页脚并作出 react

Question

我正在使用带有 Flexbox 的 react-native 路由器。我想展示 FlatList 最后采用全屏和粘性页脚。我尝试为 FlatList 指定 flexGrow: 1，为 View footer 指定 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 组件本身( subview )设置为 display: "block"，将 position: "absolute" 和 overflow 设置为 < em>任何不可见的东西。从技术上讲，它已经很粘了。 然后将 bottom: 0 添加到您的粘性，您的组件应该已经粘在底部 - 现在您只需使用您喜欢的任何属性或工具来管理它的宽度和水平位置。

我试图只用 flexbox 规则来解决这个问题，但看起来最好的方法是 position="relative" 和 position="absolute"

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

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

我的类(class)被简化了，这是为了一个粘性侧边栏:

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

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