我是编程新手,当我导航到新屏幕时,底部工作表未关闭这是它的图片。我正在使用
@gorhom/bottom-sheet^4
。我做了一些研究,我知道使用 useFocusEffect
可以实现它,但我真的不知道如何实现。有人可以帮我解决这个问题吗?
<BottomSheetModal
enablePanDownToClose={true}
ref={bottomSheetModalRef}
index={0}
snapPoints={snapPoint}
backdropComponent={renderBackdrop}
>
<View>
<TouchableWithoutFeedback
onPress={() => {
navigation.navigate("Settings");
}}
>
<Text style={styles.modalText}>Settings</Text>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback
onPress={() => {
navigation.navigate("Saved");
}}
>
<Text style={styles.modalText}>Saved</Text>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback
onPress={() => {
navigation.navigate("Delete");
}}
>
<Text style={styles.modalText}>Delete</Text>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={() => {}}>
<Text style={styles.modalText}>Log out</Text>
</TouchableWithoutFeedback>
</View>
</BottomSheetModal>
有几种方法可以做到这一点。这里有两个:
BottomSheetModal
的屏幕未聚焦时运行:useFocusEffect(
React.useCallback(() => {
return () => bottomSheetRef.current?.close()
}, [])
);
关闭
BottomSheetModal
。为此,您必须在导航时调用 bottomSheetModalRef.current?.close
:
<TouchableWithoutFeedback
onPress={() => {
navigation.navigate("Settings");
bottomSheetModalRef.current?.close();
}}
>
<Text style={styles.modalText}>Settings</Text>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback
onPress={() => {
navigation.navigate("Saved");
bottomSheetModalRef.current?.close();
}}
>
<Text style={styles.modalText}>Saved</Text>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback
onPress={() => {
navigation.navigate("Delete");
bottomSheetModalRef.current?.close();
}}
>
<Text style={styles.modalText}>Delete</Text>
</TouchableWithoutFeedback>
如果您使用 React Navigation,您还可以在导航发生变化时自动关闭任何打开的模式,如下所示:
import { useBottomSheetModal } from '@gorhom/bottom-sheet'
const Navigation = () => {
const { dismissAll: dismissAllModals } = useBottomSheetModal()
return <NavigationContainer
onStateChange={() =>
dismissAllModals()
}>
{...}
</NavigationContainer>
}
actionSheetRef.current.hide();
只需将
backdropComponent
属性添加到 BottomSheet 组件即可。背景组件将接收指示工作表位置和索引的动画道具
背景组件在底部表单模式打开并动画后出现,如果您使用此组件,如果您单击任意位置,
bottomsheet
将会消失
以下是使用backgroundComponent 属性的一些示例:
import BottomSheet, { BottomSheetBackdrop } from '@gorhom/bottom-sheet';
const renderBackdrop = useCallback(
(props: any) => (
<BottomSheetBackdrop
enableTouchThrough={false}
pressBehavior={"close"}
appearsOnIndex={0}
disappearsOnIndex={-1}
{...props}
/>
),
[]
);
<BottomSheet backdropComponent={renderBackdrop}/>
虽然 Ryan 的答案是正确的,但如果您使用 Expo 和 Expo Router,则可以执行此操作。
...
const { dismissAll: dismissAllModals } = useBottomSheetModal();
const pathname = usePathname();
const params = useGlobalSearchParams();
useEffect(() => {
dismissAllModals();
}, [pathname, params]);
...