在 react-native 中使用 flex 使项目粘在底部 [英] Make an item stick to the bottom using flex in react-native

问题描述

假设这是布局:

<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 属性赋予页脚，但它没有定位在底部，而是将其定位到屏幕的右侧.如何使页脚项目坚持到底?谢谢.

I want to make the view with the styles of footer to position at the bottom of the screen. I tried giving the alignSelf property to the footer, but instead of positioning at the bottom, it positions it to the right side of the screen. How can I make the footer item stick to the end? Thank you.

推荐答案

在 React Native 中，flexDirection 的默认值是 column(不像在 CSS 中，它在row).

In React Native, the default value of flexDirection is column (unlike in CSS, where it is row).

因此，在 flexDirection: 'column' 中，横轴是水平的，alignSelf 向左/向右工作.

Hence, in flexDirection: 'column' the cross-axis is horizontal and alignSelf works left/right.

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

To pin your footer to the bottom, apply justifyContent: 'space-between' to the container

这篇关于在 react-native 中使用 flex 使项目粘在底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！