React Native ScrollView设置父级高度后无法滚动到底部是什么原因？

问题原因 #

• 你给父级<View />设置的Dimensions.get('window').height是设备整个窗口的高度，包含了状态栏、导航栏等系统UI的高度，实际页面可用高度小于这个值，导致父View底部已经超出屏幕可视区域，放在里面的ScrollView底部自然被截断。
• 父View内先渲染了固定高度的<Foo />组件，剩下的可用高度才是ScrollView的可用空间，但你没有给ScrollView设置高度限制，它默认会和内部列表内容等高，此时ScrollView自身高度既超过了父View的剩余可用高度，又因为自身高度等于内容高度，不会触发滚动逻辑。

解决方案 #

将父View的固定高度替换为flex: 1，自动适配当前页面的可用高度，不用手动计算扣除系统UI高度；同时给ScrollView加上flex: 1属性，让它自动占满<Foo />渲染后父View剩下的所有高度，满足ScrollView需要受限高度的要求即可正常滚动。

修改后代码参考：

<View
    style={{ 
        paddingLeft: 15,
        paddingRight: 15,
        width: '100%',
        flex: 1, // 替换原Dimensions固定高度
        alignItems: 'center'
    }}>
    <Foo /> // 有固定高度的自定义组件
    <ScrollView
        style={{width: '100%', flex: 1}} // 新增flex: 1属性
        // 其他属性保持不变
        {foo.map((obj, index) => {
            return <View
                key={index}
                style={{
                    width: '100%',
                    paddingTop: 2,
                    paddingBottom: 2,
                }}
                // 其他属性保持不变
            </View>
        })
        }
    </ScrollView>
</View>

补充说明：React Native 中View默认使用flex布局，不需要额外写display: 'flex'属性，可以直接移除冗余代码。

内容的提问来源于stack exchange，提问作者four-eyes