通过深度链接导航到特定路线导航时反应本机.goBack不起作用

时间:2020-06-20 11:29:24

标签: react-native react-navigation deep-linking

当应用位于背景堆栈中[未杀死]时,则从详细信息屏幕中显示

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;

1 个答案:

答案 0 :(得分:0)

当您从深层链接打开应用时,第一个也是唯一可用的屏幕来自深层链接,当然 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]);