使用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屋！