React Native：如何在高度100%的固定View中嵌套ScrollView

我希望在固定View中嵌套ScrollView，滚动ScrollView时View的边框始终可见（作为滚动内容的外框）。为外层View设置固定高度（如700）时功能正常，但将其高度设为"100%"或flex:1以覆盖全屏时功能失效。

当前表现 #

当前代码 #

<Container style={{ flex: 1 }}>
    <Header style={{ height: 15 }} />
        <FixedView
            style={{
                borderWidth: 5,
                height: '100%',//or flex:1
            }}
        >
            <ScrollView>{content}</ScrollView>
        </FixedView>
</Container>

期望表现 #

模拟期望效果的代码（固定高度） #

<Container style={{ flex: 1 }}>
    <Header style={{ height: 15 }} />
        <FixedView
            style={{
                borderWidth: 5,
                height: 700
            }}
        >
            <ScrollView>{content}</ScrollView>
        </FixedView>
</Container>

解决方案 #

问题根源是：当外层FixedView使用flex:1或height:'100%'时，未约束的ScrollView会被内部内容撑开，导致外层FixedView的高度跟随内容滚动，边框自然也会跟着走。要让边框固定，必须让ScrollView只占用FixedView的可视区域，而非被内容撑大。

具体修改步骤：

1. 保持FixedView的flex:1（确保它填充Container的剩余空间，排除Header的高度）
2. 给ScrollView添加style={{ flex: 1 }}，让它占满FixedView的可用高度
3. 为ScrollView设置contentContainerStyle={{ minHeight: '100%' }}，确保内容不足时撑满容器，内容过多时正常滚动

修改后的完整代码：

<Container style={{ flex: 1 }}>
    <Header style={{ height: 15 }} />
    <FixedView
        style={{
            borderWidth: 5,
            flex: 1,
        }}
    >
        <ScrollView 
            style={{ flex: 1 }}
            contentContainerStyle={{ minHeight: '100%' }}
        >
            {content}
        </ScrollView>
    </FixedView>
</Container>

如果坚持使用height:'100%'，需要确保FixedView的所有父级容器都有明确的高度（比如Container设置height:'100%'），但这种方式在不同屏幕适配时不如flex布局可靠，更推荐使用上述flex方案。

内容的提问来源于stack exchange，提问作者Nguyễn Minh