前言

学习一种语言最好的方式就是实践和落地了，最近抽出点时间来打算把 YY 的小程序项目，用 RN 来实现一次，看看过程都有哪些坑。这次遇到的坑是， <ScrollView /> 不灵了。

场景

YY 直播首页，搜索区域，输入房间号后显示全屏下拉框，下拉框需要支持滚动。
期望的效果是这样的：

布局按照标准前端思维，下拉组件 <SearchDrag /> 放在搜索组件 <Search /> 里面, 页面大概布局长这样：

<View>
    <!-- header -->
    <Header />
    <!-- + 搜索区域 -->
    <Search>
        <!-- 搜索输入区域 -->
        <SearchBar />
        <!-- 搜索结果 -->
        <SearchDrag />
    </Search>
    <!-- - 搜索区域 -->
</View>

做好后发现， android 上的 ScrollView 不灵了， ios 倒是好的

问题定位

经过排查，找到了能够重现的简单 show-case: snack.expo.dev/@jackness12…

这个是 show-case 简化后的代码

<!-- + 绿色模块 -->
<View styles={{ position: 'relative', height: 400 }}>
    <!-- + 红色模块 -->
    <View styles={{position: 'absolute', top: '100%', left: 0, right: 0, height: 500}}>
        <ScrollView>
            <View />
            <View />
            <View />
            <View />
            <View />
        </ScrollView>
    </View>
    <!-- - 红色模块 -->
</View>
<!-- - 绿色模块 -->

经过实验，发现 <ScrollView /> 只有在最上层绿色模块区域内才可以滚动，就算再配置一个 overflow: visible 的样式也不行，这里与我们 web 前端的认知有所不同。