You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

@gorhom/bottom-sheet 组件内部内容无法滚动的问题求助

@gorhom/bottom-sheet 组件内部内容无法滚动的问题求助

各位好,我在React Native项目里使用@gorhom/bottom-sheet组件来展示额外详情内容,底部弹窗本身的展开、折叠功能都正常,但里面渲染的内容长度超过了弹窗高度,我没办法滚动查看剩余内容——尝试滚动时会卡住,怀疑是bottom-sheet固定了容器高度导致的。

下面是我的最小复现代码(PostDetailScreen.tsx),这个组件包含了触发底部弹窗的按钮和BottomSheet组件本身:

import React, { useCallback, useRef } from "react";
import { View, Button, StyleSheet, Text } from "react-native";
import BottomSheet, { 
  BottomSheetBackdrop, 
  BottomSheetBackdropProps, 
  BottomSheetView,
} from "@gorhom/bottom-sheet";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { ScrollView } from "react-native-gesture-handler"; // 使用 gesture-handler 的 ScrollView

// 模拟长内容的简单组件
const LongContent = () => (
  <View style={{ padding: 16 }}>
    <Text style={{ fontSize: 20, fontWeight: "bold", marginBottom: 20 }}>
      Detailed Description
    </Text>
    {Array.from({ length: 30 }).map((_, index) => (
      <Text key={index} style={{ fontSize: 16, marginBottom: 12 }}>
        Scrollable content line {index + 1}. This is here to make the content overflow the container.
      </Text>
    ))}
  </View>
);

const PostDetailScreen = () => {
  const bottomSheetRef = useRef<BottomSheet>(null);
  const snapPoints = ["50%", "90%"];

  const handleOpenPress = useCallback(() => {
    bottomSheetRef.current?.snapToIndex(0);
  }, []);

  const renderBackdrop = useCallback(
    (props: BottomSheetBackdropProps) => (
      <BottomSheetBackdrop appearsOnIndex={0} disappearsOnIndex={-1} {...props} />
    ),
    []
  );

  return (
    <GestureHandlerRootView style={styles.container}>
      <View style={styles.mainContent}>
        <Button title="Show Details" onPress={handleOpenPress} />
      </View>
      <BottomSheet 
        ref={bottomSheetRef} 
        index={-1} // 初始为关闭状态
        snapPoints={snapPoints} 
        backdropComponent={renderBackdrop} 
        enablePanDownToClose={true}
      >
        <BottomSheetView>
          {/* 这个ScrollView无法正常工作,尝试滚动时会卡住 */}
          <ScrollView>
            <LongContent />
          </ScrollView>
        </BottomSheetView>
      </BottomSheet>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f0f0f0",
  },
  mainContent: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

export default PostDetailScreen;

我已经尝试使用react-native-gesture-handler提供的ScrollView,但还是无法正常滚动长内容,希望大家能帮忙看看问题出在哪,怎么解决这个滚动卡住的问题?

内容来源于stack exchange

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.08 10:55:29