Question

我试图在<View>容器的底部制作一个名为footer的{{1}}棒。

如果我让左侧容器高于右侧容器，那么它就不会起作用。如果正确的容器高于左侧容器，那么它可以工作....

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

我也尝试过使用right，它确实坚持到底部，但只有在正确的容器高于左边容器的情况下。

Answer 1

看起来你需要在最外面的容器上设置flex：1，以便按照你想要的方式运行flex属性。我已经设置了一个工作项目here并粘贴了下面的代码。

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

Answer 2

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

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

2 个答案: