javascript - 创建一个随内容增长的 View ，当它达到屏幕高度时开始滚动响应 native ？

Question

我想使用 React Native 构建一个包含元素列表的框。我希望盒子随着更多元素的添加而增长，一旦盒子与设备屏幕一样高，盒子的内容就会变得可滚动。这样我就可以始终在屏幕上显示页眉和页脚。

换句话说，我想要一个容器来适应它的内容，如果内容多于屏幕上无法容纳的内容，我希望容器是可滚动的。

这可能吗？

这是一个 rnplay:https://rnplay.org/apps/KrOk6w

这就是我希望在屏幕上显示的项目数量超过该值时发生的情况:

这就是我只希望通过几个项目实现的结果:

这是我不希望只有少数项目发生的事情:

这是我在此示例中使用的代码，您可以更改 rowCount 以增加行数。

var React = require('react-native');

var {
    View,
    Text,
    StyleSheet,
    ScrollView,
} = React;

var styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 20,
        flexDirection: 'column',
        backgroundColor: "blue",
    },
    contentContainer: {
    },
    headerContainer: {
        padding: 20,
        backgroundColor: "#EEE",
    },
    footerContainer: {
        padding: 20,
        backgroundColor: "#EEE",
    },
    rowContainer: {
        borderTopWidth: 1,
        borderColor: "#EEE",
        padding: 30,
        backgroundColor: "red",
    },
});

class Test extends React.Component {
    render() {
        var rowCount = 20;
        var rows = [];
        for(i = 0; i < rowCount; i++) {
            rows.push(<View style={styles.rowContainer}>
                <Text>
                    {"Some text"}
                </Text>
            </View>);
        }
        return (
            <View style={styles.container}>
                <View style={styles.headerContainer}>
                    <Text>
                        {"Header text"}
                    </Text>
                </View>
                <ScrollView
                    contentContainerStyle={styles.contentContainer}>
                    {rows}
                </ScrollView>
                <View style={styles.footerContainer}>
                    <Text>
                        {"Footer text"}
                    </Text>
                </View>
            </View>
        );
    }
};

module.exports = Test;

Answer 1

给容器 View 设置一个属性:justify-content: flex-start