如何在React Native中实现初始位于屏幕下半部分、可上拉铺满全屏的ScrollView？

核心思路是利用堆叠布局+滑动手势监听，上层可拖拽视图默认仅展示底部固定高度，滑动到阈值后自动展开铺满全屏，具体不同平台的实现方案如下：

• Android：用官方Material组件库的BottomSheetBehavior实现，无需自定义手势
• iOS：iOS15+可直接用UISheetPresentationController，低版本自定义拖拽手势即可
• 前端Web：用CSS绝对定位+transform偏移实现，配合拖拽事件切换状态

Android 实现示例 #

1. 布局文件采用CoordinatorLayout作为根布局：

<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 底层固定视图 -->
    <LinearLayout
        android:id="@+id/base_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#F2F2F2"/>

    <!-- 可上拉展开的上层视图 -->
    <LinearLayout
        android:id="@+id/scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FFFFFF"
        app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"/>

</androidx.coordinatorlayout>

2. 代码中配置行为参数：

val sheetBehavior = BottomSheetBehavior.from(scroll_view)
// 收起状态下展示的高度，单位px
sheetBehavior.peekHeight = 300
// 默认展示收起状态
sheetBehavior.state = BottomSheetBehavior.STATE_COLLAPSED
// 禁止完全隐藏上层视图
sheetBehavior.isHideable = false

iOS 实现示例 #

iOS15及以上版本直接用系统自带的Sheet控制器即可：

let targetVC = TargetViewController()
targetVC.modalPresentationStyle = .pageSheet
if let sheet = targetVC.sheetPresentationController {
    // 配置支持的停靠高度：中等高度（默认展示）、全屏高度
    sheet.detents = [.medium(), .large()]
    // 允许上拉铺满全屏
    sheet.prefersScrollingExpandsWhenScrolledToEdge = true
}
present(targetVC, animated: true)

前端Web 实现示例 #

1. 基础样式：

.page-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
.base-view {
    width: 100%;
    height: 100%;
    background: #f2f2f2;
}
.drag-view {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    /* 默认仅展示底部300px */
    transform: translateY(calc(100vh - 300px));
    transition: transform 0.25s ease;
}
.drag-view.full-screen {
    transform: translateY(0);
}

2. 交互逻辑：监听拖拽视图的touchstart、touchmove、touchend事件，记录滑动距离，滑动超过阈值后添加full-screen类即可自动动画到全屏状态。

内容的提问来源于stack exchange，提问作者user11587840