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

xeufq47z  于 2023-01-21  发布在  React
关注(0)|答案(1)|浏览(134)

在我的React原生应用(Web实现,带有Expo托管工作流)上,我实现了react导航。我的所有内容都基于Stack。显然,路径和与这些路径关联的组件之间匹配良好。示例:当我访问登录页面时,我可以读取URL myapp/log-in,如果我转到设置,我可以读取myapp/settings
但是,当我尝试手动键入我的URL时:myapp/settings,我被带到我的初始路线(myapp/log-in)。我正在尝试这样做,我的目标是从外部网站,我可以直接把用户带到myapp/settings
为了实现我的目标,我基本上通过了所有相关的文档,找不到我做错了什么:

我已经在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'
2uluyalo

2uluyalo1#

我刚刚注意到,在文档中,以下概念不是很清楚:
我们有配置对象:

const config = {
  screens: {
    Home: 'home',
    SignUp: 'sign-up',
  },
};

const linking = {
  config,
  prefixes: [prefix],
};

在这里,我认为ChatProfile指的是实际的react组件(因为它们通常被称为screens),但我注意到它们指的是screens名称。因此,当我们有这样的内容时:

<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
  },
};

相关问题