时间戳

首页 > 解决方案 > 通过深层链接导航到特定路线导航时反应本机。goBack 不起作用

react-native - 通过深层链接导航到特定路线导航时反应本机。goBack 不起作用

问题描述

当应用程序位于背景堆栈 [未终止] 时，然后从详细信息屏幕

navigation.goBack() 正在工作，但是当应用程序被杀死时，然后通过深度链接

 <a href="deeplinking://Details/123">Click on ut </a>

navigation.goBack() 不工作给出错误

任何导航都未处理“GO_BACK”操作

请帮助下面是代码

const HomeScreen = ({ navigation }) => (
  <View
    style={{
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
    }}>
    <Text>Home Screen</Text>
    <TouchableOpacity
      onPress={() => {
        navigation.navigate('Details', { itemId: 40 });
      }}>
      <Text>Go to Details</Text>
    </TouchableOpacity>
  </View>
);

const DetailScreen = ({ route, navigation }) => {
  console.log(navigation);
  console.log(route);

  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <Text>Details Screen</Text>
      <Text>Item Id: {route.params.itemId}</Text>
      <TouchableOpacity onPress={() => navigation.goBack()}>
        <Text>Go Back</Text>
      </TouchableOpacity>
    </View>
  );
};

const Stack = createStackNavigator();

const App = () => {
  const deepLinking = {
    prefixes: ['https://deeplinking.com/', 'deeplinking://'],
    config: {
      initialRouteName: 'Home',
      Home: 'Home',
      Details: {
        path: 'Details/:itemId',
        params: {
          itemId: null,
        },
      },
    },
  };

  return (
    <NavigationContainer linking={deepLinking}>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

标签： react-nativereact-navigationdeep-linking

解决方案

当您从深度链接打开应用程序时，第一个也是唯一可用的屏幕来自深度链接，当然 goBack 不可用。

我用 BackHandler 解决了这个问题。当您从链接打开帖子时，我从 Instagram 模仿。然后，当您返回时，Instagram 将关闭。所以，我做了我的后退按钮来杀死应用程序。

  useEffect(() => {
    const backAction = () => {
      if (index == 0) {
        BackHandler.exitApp();
      } else {
        navigation.goBack();
      }
      return true;
    };

    const backHandler = BackHandler.addEventListener(
      "hardwareBackPress",
      backAction
    );

    return () => backHandler.remove();
  });

index 告诉我导航中当前屏幕的索引是什么：

  const index = useNavigationState((state) => state.index);

或者

我在大多数市场上都发现了这种流程。他们首先将用户导航到主页，然后导航到深度链接屏幕。

因此，在我的主页中，我放置了检查深层链接的功能。

  const deeplinkCheck = () => {
    const { params } = route;
    const screen = params?.screen;
    if (screen == undefined) {
      return;
    }
    switch (screen) {
      case "my-coupons":
        navigation.navigate(PAGE.MY_COUPONS);
        return;

      default:
        return;
    }
  };



useEffect(() => {
    deeplinkCheck();
  }, [route]);

推荐阅读