具有多个路径的反应导航深度链接

Question

有什么方法可以配置react-navigation让单屏可以处理多个链接吗？

StackNavigator 中的每个屏幕都可以有一个可选的属性 path 启用深度链接，StackNavigator 也接受 paths 选项让你覆盖路径每个特定的屏幕，但它仍然是一对一的映射。有没有办法声明无限应该由单个屏幕处理的路径数量？

Answer 1

您可以为无限条路径使用变量，如 StackNavigator docs

中所示

来自文档的示例

StackNavigator({
  // For each screen that you can navigate to, create a new entry like this:
  Profile: {
    // `ProfileScreen` is a React component that will be the main content of the screen.
    screen: ProfileScreen,
    // When `ProfileScreen` is loaded by the StackNavigator, it will be given a `navigation` prop.

    // Optional: When deep linking or using react-navigation in a web app, this path is used:
    path: 'people/:name',
    // The action and route params are extracted from the path.

    // Optional: Override the `navigationOptions` for the screen
    navigationOptions: ({ navigation }) => ({
      title: `${navigation.state.params.name}'s Profile'`,
    }),
  },

  ...MyOtherRoutes,
});

更新

您可以创建自定义路由处理程序以更详细地控制显示的路径 here。

来自文档的示例

import { NavigationActions } from 'react-navigation'

const MyApp = StackNavigator({
  Home: { screen: HomeScreen },
  Profile: { screen: ProfileScreen },
}, {
  initialRouteName: 'Home',
})
const previousGetActionForPathAndParams = MyApp.router.getActionForPathAndParams;

Object.assign(MyApp.router, {
  getActionForPathAndParams(path, params) {
    if (
      path === 'my/custom/path' &&
      params.magic === 'yes'
    ) {
      // returns a profile navigate action for /my/custom/path?magic=yes
      return NavigationActions.navigate({
        routeName: 'Profile',
        action: NavigationActions.navigate({
          // This child action will get passed to the child router
          // ProfileScreen.router.getStateForAction to get the child
          // navigation state.
          routeName: 'Friends',
        }),
      });
    }
    return previousGetActionForPathAndParams(path, params);
  },
});

具有多个路径的反应导航深度链接

react-navigation deep linking with multiple paths

reactjs

react-native

react-navigation