如何在不同组件中打开BottomSheetModal (@gorhom/底部工作表)，使用React本机(博览会)
如何在不同组件中打开BottomSheetModal (@gorhom/底部工作表)，使用React本机(博览会)
提问于 2022-01-15 08:42:53
我正在使用https://gorhom.github.io/react-native-bottom-sheet/。
我想知道如何在一个不同的文件(例如Navbar组件)中打开"BottomSheetModal“。
这就是我的代码现在打开同一组件内部的底部工作表的样子。
const BottomSheetModal: FC = () => {
const bottomSheetModalRef = useRef<BottomSheet>(null);
const snapPoints = useMemo(() => ["25%", "50%"], []);
const handlePresentModalPress = useCallback(() => {
bottomSheetModalRef.current?.present();
}, []);
return (
<>
<Button title="Test" onPress={() => handlePresentModalPress()} />
<BottomSheet
index={1}
style={{ ...shadows.bottomSheet }}
ref={bottomSheetModalRef}
snapPoints={snapPoints}>
<View style={styles.container}>
<Text>Awesome </Text>
</View>
</BottomSheet>
</>
);
};那么，我如何使用我的Navbar组件中底部工作表的开头代码呢？
Navbar组件
// Open BottomSheet here
<TouchableWithoutFeedback onPress={() => openBottomSheet()}>
<View>
<Image
style={styles.avatar}
source={{
uri: "https://lumiere-a.akamaihd.net/v1/images/character_themuppets_kermit_b77a431b.jpeg?region=0%2C0%2C450%2C450",
}}
/>
</View>
</TouchableWithoutFeedback>谢谢!
Stack Overflow用户
回答已采纳
发布于 2022-01-21 17:49:41
我发现这样做，如果有人遇到这个问题，我会在这里张贴！
因此，您必须做的是将参考文件传递给底部工作表组件。因此，在Navbar组件中，我为底部表创建了ref，然后将其传递到底部表中。
纳瓦尔：
// Create Ref
const userBottomSheetRef = useRef<BottomSheetModal>(null);
// Pass ref into the bottom sheet component
<BottomSheet ref={userBottomSheetRef} snapPoints={["30%"]}/>然后，在底部工作表组件中，使用function函数转发ref，然后像往常一样传递它：
<BottomSheetModal ref={ref} >
<BottomSheetScrollView>
<View style={styles.container}>{children}</View>
</BottomSheetScrollView>
</BottomSheetModal>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70719996
复制相关文章
相似问题
腾讯云开发者
