在 react-native 中使用 flex 使项目粘在底部

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

原文由 Karl 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 React Native 中， flexDirection 的默认值是 column （与 CSS 不同，它是 row ）。

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

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

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我会使用以下方法：

 <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 的样式可以在不破坏应用程序布局的情况下更新，并且组件本身更容易重用:)

原文由 David 发布，翻译遵循 CC BY-SA 3.0 许可协议