React Navigation 动态屏幕和深度链接

Question

我想通过反应导航创建动态选项卡屏幕，但我不知道如何通过深层链接来解决它。

我希望我的选项卡屏幕可以通过深度链接访问，例如： /tabs/:tabId 但我不知道如何处理链接配置。 如果有人可以帮助我，我已经创建了这个小吃：

https://snack.expo.dev/@natinho68/getting-started-%7C-react-navigation

Answer 1

首先，您需要通过文档
进行设置

这是一个最小的示例。 Root stack 是一个堆栈导航器，有 3 个屏幕：启动画面、登录和应用程序。 App 是另一个堆栈导航器（嵌套），有 2 个屏幕：仪表板和登录。

const deepLinkDevPrefix = "https://custom.server.org"
const deepLinkLocalProtocol = "customprotocol://"
const deepLinkConfig = {
  screens: {
    Splash: "Splash",
    Login: "Login",
    App: {
      path: "App",
      screens: {
        Dashboard: "Dashboard",
        Profile: "Profile,
      },
    },
  }
}

在 getInitialURL 内部，您可以处理打开应用程序的 url。

const App = () => {
  const getInitialURL = async () => {
    // Check if app was opened from a deep link
    const url = await Linking.getInitialURL();

    console.log('This is url')
    console.log(url)

    if (url !== null) {
      return url;
    }

    return undefined
  }
  
  const linking = {
    prefixes: [deepLinkDevPrefix, deepLinkLocalProtocol],
    deepLinkConfig,
    getInitialURL
  };

  return (
    <NavigationContainer linking={linking}>
      <RootStack />
    </NavigationContainer>
  );
}

在这里您可以了解如何在没有导航属性的情况下进行导航。