react-native - 在通过深度链接导航到特定路线导航时 React Native。goBack 不起作用

Question

当应用程序在后台堆栈中[未被杀死]然后从详细信息屏幕

navigation.goBack() is working but when app is kill then via deeplinking

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

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

“GO_BACK” Action 没有被任何导航处理

下面是代码请帮忙

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;

Answer 1

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

我用 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]);