React导航:如何访问URL中与path相关的组件?

Question

在我的React Native应用程序(web实现，与Expo管理的工作流)，我已经实现了反应导航。我有所有基于Stack的东西。显然，路径和与这些路径相关联的组件之间存在很好的匹配。:当我访问登录页面时，我可以在URL中读取myapp/log-in，如果我进入设置，我可以读取myapp/settings。

然而，当我尝试手动输入我的URL:myapp/settings时，我被带到我的初始路由(myapp/log-in)。我正在尝试这样做，我的目标是，从外部网站，我可以直接带用户到myapp/settings。

为了达到我的目标，我基本上浏览了所有与此相关的文档，但找不到我做错了什么:

• https://reactnavigation.org/docs/deep-linking/
• https://reactnavigation.org/docs/configuring-links
• https://reactnavigation.org/docs/web-support
• https://reactnavigation.org/docs/navigation-container/链接

我已经在GitHub上创建了一个问题: https://github.com/react-navigation/react-navigation/issues/11162

在我的示例存储库中，您可以确认我所描述的行为:https://github.com/JMRMEDEV/navigation-issues, README有一些关于实现的额外细节。

• 我已经尝试了不同的设置，如在app.json上定义schema
• 我试图在配置中设置前缀。
• 我试图删除Stack.Group(认为可能可以作为嵌套的navigator并使用Stack.Screen作为顶层组件)。
• 我试图将我的屏幕配置定义为对象而不是字符串EG:Settings: {path: 'settings'}代替Settings: 'settings'

Answer 1

我刚刚注意到，在文档中，以下概念不是那么清楚:

我们有了配置对象:

const config = {
screens: {
Home: 'home',
SignUp: 'sign-up',
},
};
const linking = {
config,
prefixes: [prefix],
};

在这里，我认为Chat和Profile指的是实际的反应组分(因为它们通常被称为屏幕))，但我注意到他们指的是屏幕名称。因此，当我们有这样的内容时:

<NavigationContainer linking={linking}>
<Stack.Navigator
initialRouteName={'home'}
screenOptions={{
animation: 'none',
headerShown: false,
}}
>
<Stack.Screen component={Home} name="home" />
<Stack.Screen component={SignUp} name="signUp" />
</Stack.Navigator>
</NavigationContainer>

引用的配置对象将不起作用(由于敏感的大小写)，应该更新为如下内容:

const config = {
screens: {
Home: 'home',
signUp: 'sign-up', // The key will be the screen name and the value will be the path
},
};