使用flex in react-native使物品粘在底部

Question

假设这是布局:

<View style={styles.container}>
    <View style={styles.titleWrapper}>
        ...
        ...
    </View>
    <View style={styles.inputWrapper}>
        ...
        ...
    </View>

    <View style={styles.footer}>
        <TouchableOpacity>
            <View style={styles.nextBtn}>
                <Text style={styles.nextBtnText}>Next</Text>
            </View>
        </TouchableOpacity>
    </View>
</View>

我想用页脚样式制作视图,使其位于屏幕底部.我尝试将alignSelf属性赋予页脚,但不是定位在底部,而是将其定位到屏幕的右侧.如何让页脚项目坚持到底？谢谢.

Answer 1

我会使用以下方法:

<View style={styles.container}>

    <View style={styles.contentContainer}> {/* <- Add this */}

        <View style={styles.titleWrapper}>
            ...
        </View>
        <View style={styles.inputWrapper}>
            ...
        </View>

    </View>

    <View style={styles.footer}>
        ...
    </View>
</View>

var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    titleWrapper: {

    },
    inputWrapper: {

    },
    contentContainer: {
        flex: 1 // pushes the footer to the end of the screen
    },
    footer: {
        height: 100
    }
});

这样可以在不破坏应用程序布局的情况下更新样式,titleWrapper并且inputWrapper组件本身更容易重复使用:)

Answer 2

在本地做出反应,默认值flexDirection是column(不像在CSS,它在哪里row).

因此,flexDirection: 'column'横轴是水平的并且alignSelf左/右工作.

要将页脚固定到底部,请应用于justifyContent: 'space-between'容器

Answer 3

考虑屏幕结构

<View style={styles.container}>
  <View style={styles.body}> ... </View>
  <View style={styles.footer}>...</View>
</View>

您可以使用 Flexbox 方法利用 flex-grow 干净地完成此操作。

const Styles = StyleSheet.create({
  container:{
    flexDirection: 'column', // inner items will be added vertically
    flexGrow: 1,            // all the available vertical space will be occupied by it
    justifyContent: 'space-between' // will create the gutter between body and footer
  },
})

注意：如果是嵌套元素，您必须确保父容器在使用 flexGrow 时有足够的高度。设置父母和孩子的背景颜色进行调试。

Answer 4

要将 a 固定View到底部，只需使用：marginTop: 'auto'。

在网上搜索了一个小时后，这对我有用。我尝试尝试并且成功了！

Answer 5

为此，您可以使用样式表元素\xc2\xa0position:\'absolute\'。

\n\n

/*This is an Example to Align a View at the Bottom of Screen in React Native */\nimport React, { Component } from \'react\';\nimport { StyleSheet, View, Text } from \'react-native\';\nexport default class App extends Component {\n  render() {\n    return (\n      <View style={styles.containerMain}>\n        <Text> Main Content Here</Text>\n        <View style={styles.bottomView}>\n          <Text style={styles.textStyle}>Bottom View</Text>\n        </View>\n      </View>\n    );\n  }\n}\nconst styles = StyleSheet.create({\n  containerMain: {\n    flex: 1,\n    alignItems: \'center\',\n    justifyContent: \'center\',\n  },\n  bottomView: {\n    width: \'100%\',\n    height: 50,\n    backgroundColor: \'#EE5407\',\n    justifyContent: \'center\',\n    alignItems: \'center\',\n    position: \'absolute\', //Here is the trick\n    bottom: 0, //Here is the trick\n  },\n  textStyle: {\n    color: \'#fff\',\n    fontSize: 18,\n  },\n});\n

\n\n

\n

Answer 6

绝对位置是修复页脚的另一种方法,就像:

footer: {
    position: 'absolute',
    height: 40,
    left: 0, 
    top: WINDOW_HEIGHT - 40, 
    width: WINDOW_WIDTH,
 }

Answer 7

对我来说，答案是为元素创建一个容器视图，然后为样式创建一个容器视图。

bottomContainer: {
    flex: 1,
    justifyContent: 'flex-end',
}

Answer 8

您可以使用这种风格：

row: {
    flexDirection: 'row',
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute', //Here is the trick
    bottom: 0,
}

Answer 9

在滚动视图中嵌入其他内容

<View style={styles.container}>

  <ScrollView> {/* <- Add this */}
        <View style={styles.titleWrapper}>
            ...
        </View>
        <View style={styles.inputWrapper}>
            ...
        </View>
    </ScrollView>

    <View style={styles.footer}>
        ...
    </View>
</View>