@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
相关产品推荐
相关产品推荐

