我正试图用npm包重新激活的底部表单在react native中实现底部表单，但向下滑动手势处理程序不起作用

Question

导入语句

import * as React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import Animated from 'react-native-reanimated';
import BottomSheet from 'reanimated-bottom-sheet';

主要应用程序功能

export default function App() {
const renderContent = () => (
<View
style={{ backgroundColor: 'white', padding: 16, height: 450, }} >
<Text>Swipe down to close</Text>
</View>
const sheetRef = React.useRef(null);
const fall =  new Animated.Value(1)
return (
<>
<View
style={{
flex: 1,
backgroundColor: 'papayawhip', alignItems: 'center', justifyContent: 'center',
}}
>
<Button title="Open Bottom Sheet" onPress={() => sheetRef.current.snapTo(0)} />
</View>

继续使用底页代码

<BottomSheet 
ref={sheetRef} 
snapPoints={[200, 0]} 
initialSnap={1} borderRadius={20}
renderContent={renderContent}
callbackNode={fall}
enabledGestureInteraction={true}
/>
</>
)

}

我已经将enabledGestureInteraction设置为true，但它仍然不起作用

Answer 1

我为此找到的解决方案是，我们必须将组件封装在来自react原生手势处理程序的GestureHandlerRootView组件中，并且我们必须使用flex:1 设置其样式

讨论参考链接-https://github.com/gorhom/react-native-bottom-sheet/issues/775

Answer 2

使用来自react原生手势处理程序的GestureHandlerRootView组件包装您的应用程序，并且必须使用flex 1。

示例：

import { GestureHandlerRootView } from "react-native-gesture-handler";

function App(){
return(
<GestureHandlerRootView style={{ flex: 1 }}>
<AppNavigators />
</GestureHandlerRootView>
);
}

Answer 3

我以前从未使用过重新激活的底部页。但看起来snapPoints属性有问题。应该是：

snapPoints={[0, 200]}

包裹过期了。我建议你用这个来代替：https://gorhom.github.io/react-native-bottom-sheet/

我正在我的项目中使用它。太棒了。