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

Question

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

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

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

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

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

Answer 1

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

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