react-native - 使用不同的参数深度链接到一个已经打开的屏幕。可能吗？

Question

我正在开发一个应用程序，它有一个类别屏幕，其中显示了该类别的相关帖子。我正在使用 react-navigation 在屏幕之间导航并处理深度链接。可以在应用程序内或通过深层链接访问类别屏幕。要通过深层链接访问类别屏幕，我使用类似 myapp://category/:id 的东西。

如果应用已经打开并且聚焦在类别屏幕上，则深层链接不执行任何操作。

我目前已使用 componentDidUpdate 生命周期方法“修复”它，以比较存储在状态中的 ID 和 navigation.getParam 中的 ID。

componentDidUpdate = () => {
  const { navigation } = this.props;
  const { categoryID } = this.state;
  const paramID = navigation.getParam('id', null);

  if (paramID !== categoryID) {
    this.setState({ categoryID: paramID }, () => {
      // fetch data
    });
  }
}

但是，这对我来说似乎是一个肮脏的修复。有更好的方法吗？也许使用推送而不是通过 react-navigation 导航来打开所有深层链接？

Answer 1

对于任何来到这里想知道如何做到这一点的人，比如我，这里是解决方案:

您可以使用 getId Stack.Screen property .您只需从 getId 属性返回唯一 ID。这是一个例子:

假设我们有一个 UserScreen 组件，它是我们的 Stack 导航器的一部分。 UserScreen 有一个路由参数:userId。我们可以像这样使用 getId 属性:

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const AppStack = () => {
  const getUserRouteId = ({ params }) => {
    return params && params.userId;
  };

  return (
    <Stack.Navigator>
      {/* Other routes */}
      <Stack.Screen name="User" component={UserScreen} getId={getUserRouteId} />
    </Stack.Navigator>;
  );
};

现在，当您尝试使用 navigate 函数正常导航到此路线时，如果导航操作中的参数 userId 与 UserScreen 中的不同 您当前所在的位置，它会将您导航到新的用户屏幕。 React Navigation deep linking在内部使用 navigate 函数。