React Native 在动态路由上使用基于文件的路由器导航时出现问题

5rgfhyps  于 2023-11-21  发布在  React
关注(0)|答案(1)|浏览(217)

基于文件的路由对我来说并没有完全点击。早期的NextJS pages文件路由工作得很容易。出于某种原因,我没有转换到基于Expo Route文件。可能是因为堆栈和标签和插槽的组合。我一直在阅读动态路由文档。当我从标签屏幕导航到/pattern/[id]时,有些东西在翻译中丢失了,因为Expo找不到路线。我已经尝试了各种方法,但我认为这与我的文件夹结构有关。我想要的是:目标/pattern/[id]是(tabs)的子项,而不是搜索。

app
  |__(auth)
     |__ _layout.tsx
     |__(tabs)
       |__ index.tsx
       |__ _layout.tsx
       |
       |__ search
       | |__ index.tsx // <-- from where I navigate from
       | |__ _layout.tsx
       |
       |__ pattern // <-- where I want to navigate to
       |  |__ _layout.tsx
       |  |__ [id].tsx // <-- dynamic pattern id name 
       |__ // other tabs content is ok since no navigation

字符串
下面是我的Tab_layout:

export default function TabLayout() {
  return (
    <Tabs>
      <Tabs.Screen
        name="index"
      />
      <Tabs.Screen
        name="search"
      />
      <Tabs.Screen
        name="pattern"
        options={{
          href: null, // based on docs this will hide the tab
      />
  </Tabs>
 )
};


在我的搜索界面上,当我按下一个项目导航到,

router.push({
  pathname: '/pattern', // I have also tried pathname: '/pattern/[id]', 
  params: { 
    id: dynamicLabelId
  },
});


来自Expo的错误是找不到路由。pattern路由发生了什么?:

这是我目前的网站Map从博览会:

从那以后,我使用Stack添加了一个不同的Pattern _layout而不是Slot:

export default function PatternLayout() {
  return (
    <Stack>
      <Stack.Screen
        name="[id]"
    </Stack>
  );
}


但这似乎并没有解决问题...我请求帮助:
1.为什么router.push({ pathname: '/pattern', params: { id: label },});不能正常工作?
1.我的文件结构是否正常?我是否需要在模式中使用堆栈屏幕来捕获[id].tsx页面?提前感谢您

7kqas0il

7kqas0il1#

我不太确定,但我想在这里发表两点意见:
1.如果你想隐藏一个标签,不要使用href: null,而是使用tabBarButton: () => null,这将隐藏标签,而不会扰乱路由。
1.你的路由声明router.push({ pathname: '/pattern', params: { id: label },})会将路由器发送到下面的url:/pattern?id:123。但你实际上想要的是它转到/pattern/123。要做到这一点,请尝试使用router.push({ pathname: /pattern/${label}``。
这是为我工作的动态路由,希望它有帮助。

相关问题