javascript - 我正在尝试使用 React-Native 将按钮放置在屏幕底部，但我真的很难理解如何通过 Flex 支持正确地做到这一点

Question

我正在尝试使用 React-Native 构建一个应用程序，我需要在屏幕底部放置两个彼此相邻的按钮。到目前为止我写了这段代码:

    render() {
        const { subtitle } = this.state;
        return (
            <View style={styles.container}>
                <ActionBar onBackAction={this.backActionHandler} isBackAvailable />
                <View style={styles.contentContainer}>
                    <Text>{subtitle}</Text>
                </View>
                <View style={styles.buttonsContainer}>
                    <Button title="BTN #1" />
                    <Button title="BTN #2" />
                </View>
            </View>
        );
    }

使用这些样式:

    const styles = StyleSheet.create({
        container: {
            flex: 1,
            alignItems: 'center',
            justifyContent: 'space-between'
        },
        contentContainer: {
            flex: 1,
            flexGrow: 1,
            backgroundColor: 'purple'
        },
        buttonsContainer: {
            flex: 1,
            justifyContent: 'flex-end',
            flexDirection: 'row',
            marginBottom: 40,
            backgroundColor: 'red'
        }
    });

这是迄今为止的结果......

这就是我想要实现的目标:

有人能指出我的错误在哪里吗？如果这很重要，则上面的整个屏幕将嵌套在另一个仅具有 flex: 1 属性的 View 中。我试图理解这个弹性概念，但我无法做到这一点。

Answer 1

只需将 buttonsContainer 样式的 flex 更改为 0 即可。当您将 flex: 1 放入 buttonsContainer 和 contentContainer 时，可用空间将在这两个容器之间分配。但根据您的要求，contentContainer 应占用所有可用空间。因此，将 contentContainer 设置为 flex: 1 是正确的。要获得所需的结果，请将 flex: 0 设置为 buttonsContainer，或者您可以避免使用 buttonsContainer 的 flex 属性。

了解有关 Flex 的更多信息 here 。 希望这会有所帮助!