Question

我在Flexbox中使用react-native路由器。我想展示FlatList最终采用全屏和粘性页脚。我尝试为FlatList指定flexGrow: 1，为View footer指定flexShrink: 0，但它不起作用。我在世博会上构建应用程序并在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

首先，祝你好运:)如果你的“粘性逻辑”并不像“只是始终保持在最低点”那么简单，你将不得不开始收听卷轴并调整大小......

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

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

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

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

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

附加说明：我知道如果你合并display: "flex"和position: "relative"，它会以一种特殊的方式处理。不确定究竟有什么不同，但是当指定position =“relative”时，block和flex的行为有点不同。如果您在布局中看到奇怪，请尝试在Flex视图和块粘贴（块/相对包装器）之间添加包装器，以规范行为。

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

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

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

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

1 个答案: