React Native 使用expo-router时防止默认返回导航

wko9yo5t  于 2023-04-07  发布在  React
关注(0)|答案(1)|浏览(500)

我目前第一次使用expo和expo-router,有一个关于默认返回导航的问题。我的意思是,例如在Google Pixel上从屏幕左边缘向中间滑动。这将触发我的堆栈导航器上的返回导航。
在我之前的React Navtive CLI和React Navigation项目中,我可以通过向导航属性的“beforeRemove”事件添加事件侦听器来防止这种情况。
我怎样才能用expo-router实现这一点?我按照他们的指示构建了一个CustomStack navigator,并希望我可以通过这种方式访问“导航”。我的代码基本上看起来像这样:

CustomStack.tsx

  1. import { createStackNavigator, StackNavigationOptions } from "@react-navigation/stack";
  2. import { withLayoutContext } from "expo-router";
  3. const { Navigator } = createStackNavigator();
  4. export const CustomStack = withLayoutContext<StackNavigationOptions, typeof Navigator>(Navigator);

_layout.tsx

  1. import { Stack } from "expo-router";
  2. import { CustomStack } from "./CustomStack";
  3. export default function RootLayout() {
  4. return (
  5. <CustomStack>
  6. <Stack.Screen name="Home" />
  7. <Stack.Screen name="About" />
  8. // ...
  9. </CustomStack>
  10. );
  11. }

关于.tsx

  1. import type { StackScreenProps } from "@react-navigation/stack";
  2. import { useEffect } from 'react';
  3. export default function About({ navigation }: StackScreenProps<{}>) {
  4. useEffect(() => {
  5. navigation.addListener('beforeRemove', (e) => {
  6. e.preventDefault();
  7. Alert.alert(
  8. 'Changes might be lost',
  9. 'Really want to go back?',
  10. [
  11. { text: "Cancel", style: 'cancel', onPress: () => { } },
  12. {
  13. text: "Yes",
  14. style: 'destructive',
  15. onPress: () => navigation.dispatch(e.data.action),
  16. },
  17. ]
  18. );
  19. };
  20. });
  21. }, [navigation]);

在我的RN CLI应用程序中没有TypeScript,About.jsx中的useEffect可以工作。我可能把类型搞砸了吗?我第一次在RN中使用TypeScript,并遵循了this documentation
我真的很喜欢expo-router的方法,它根据我的文件定义我的导航路线,以及将布局文件添加到我的文件夹的可能性。所以如果有人能解释如何在仍然能够使用expo-router的情况下防止默认的返回导航,那将是令人惊讶的。
谢谢你的帮助
托马斯
我尝试使用navigation属性来附加事件并防止默认的返回导航。我创建了一个CustomStack导航器并根据文档导入了所有类型。我希望我可以在我的功能组件中访问navigation属性并添加事件侦听器。然而,该属性未定义。

i34xakig

i34xakig1#

不需要使用自定义堆栈。解决方案更简单,因为你只需要useNavigation from expo,而不是像你那样的react-native。
因此,您可以使用expo-router堆栈并像这样更新About组件:

  1. import { useNavigation, useRouter } from 'expo-router';
  2. import { useEffect } from 'react';
  3. export default function About() {
  4. // Navigation
  5. const navigation = useNavigation();
  6. // Effect
  7. useEffect(() => {
  8. navigation.addListener('beforeRemove', (e) => {
  9. e.preventDefault();
  10. console.log('onback');
  11. // Do your stuff here
  12. navigation.dispatch(e.data.action);
  13. });
  14. }, []);
  15. }

希望这将是有帮助的,展览路由器的文档是不完整的,现在。
请记住,您需要管理侦听器以防止意外调用侦听器,例如使用removeListener。

展开查看全部

相关问题