React Native - 容器底部的粘性页脚

Posted 2023-03-07

【中文标题】React Native - 容器底部的粘性页脚

【英文标题】：React Native - Sticky footer at the bottom of container

【发布时间】：2016-03-11 19:54:52

【问题描述】：

我正在尝试在 right 容器的底部制作一个名为 footer 的 <View>。

这是一个活生生的例子：https://rnplay.org/apps/G3rHqQ

如果我让左边的容器比右边的高，那么它就行不通了。如果右边的容器比左边的高，那么它就可以工作....

红色和橙色元素是动态的，根据其内容具有不同的高度。相反，蓝色的应该始终贴在右侧容器的底部。

我也尝试过使用position: 'absolute'; bottom:0; left: 0; right: 0;，它确实会粘在底部，但只有当右侧容器高于左侧容器时。

【问题讨论】：

你能发一张你想要达到的目标的照片吗？

谢谢，我在描述中添加了一张图片。

【参考方案1】：

我正在尝试做类似的事情。我需要一个视图来坚持到底。我使用了poistion: 'absolute', bottom:0，它确实粘在了底部，但视图的宽度不再拉伸。

【讨论】：

我使用了相同的技术，position: 'absolute'; bottom:0; left: 0; right: 0;。如果右侧容器高于左侧容器，则它可以正常工作。如果它更短，则定位的绝对元素将不尊重bottom: 0;。会不会是 Flexbox 中的错误？

不确定。我最终不得不将 ListView 放在我需要贴在底部的视图上方，并且 ListView 无论如何都会扩展以填充该区域，所以我的问题就消失了。仍然希望看到这个问题的答案。

那是答案还是评论，请阅读 *** 指南，以答案或评论的形式发表您的贡献

【参考方案2】：

看起来你需要在最外层的容器上设置一个 flex:1 才能让 flex 属性按照你想要的方式工作。我已经建立了一个工作项目here 并粘贴了下面的代码。

https://rnplay.org/apps/WoceXg

'use strict';

import React,  AppRegistry, StyleSheet, View, Text  from 'react-native';

const SampleApp = React.createClass(
  render: function() 
    return (
      <View style= flex:1 >
        <View style=styles.wrapper>
          <View style=styles.left>
            <Text>Left</Text>
            <Text>Left</Text>
            <Text>Left</Text>
            <Text>Left</Text>
            <Text>Left</Text>
            <Text>Left</Text>
            <Text>Left</Text>
            <Text>Left</Text>
            <Text>Left</Text>
          </View>
          <View style=styles.right>
            <View style=styles.rightInner>
              <View style=styles.content>
                <Text>content</Text>
                <Text>content</Text>
              </View>
              <View style=styles.footer>
                <Text>Sticky</Text>
              </View>
            </View>
          </View>
        </View>
        <View style= flex:1 ></View>
      </View>
    );
  ,
);

const styles = StyleSheet.create(
  wrapper: 
    flexDirection: 'row',
    paddingTop: 50,
    flex:1
  ,
  left: 
    backgroundColor: 'lightblue',
    flex: 1,
  ,
  right: 
    backgroundColor: 'lightgreen',
    flex: 4,
  ,
  rightInner: 
    flex: 1,
    backgroundColor: 'orange',
  ,
  content: 
    flex: 1,
  ,
  footer: 
    backgroundColor: 'green',
  
);

AppRegistry.registerComponent('SampleApp', () => SampleApp);

【讨论】：

您对<View style= flex:1 ></View> 所做的事情是占据页面上的一半空间并使包装器拉伸一倍。通过拉伸容器变得比左边的高，并导致footer 在底部。尝试为 View 添加背景，您会发现它占用了底部的一半空间。