React native的React导航v5中的嵌套屏幕深度链接

ar5n3qh5  于 2023-04-07  发布在  React
关注(0)|答案(1)|浏览(140)

我有一个StackNavigator嵌套在一个DrawerNavigator中。我似乎无法链接到嵌套在StackNavigator中的屏幕。例如,给定以下导航结构:

export default class Navigator extends Component {
  Posts = () => {
    const Stack = createStackNavigator()
    return (
      <Stack.Navigator initialRouteName="Index" headerMode="none">
        <Stack.Screen name="Index" component={PostIndexScreen} />
        <Stack.Screen name="Show" component={PostShowScreen} />
        <Stack.Screen name="New" component={PostNewScreen} />
        <Stack.Screen name="Reply" component={PostNewReplyScreen} />
        <Stack.Screen name="JustPublished" component={PostPublishedScreen} />
      </Stack.Navigator>
    )
  }

  Home = () => {
    const Stack = createStackNavigator()
    return (
      <Stack.Navigator initialRouteName="Home" headerMode="none">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Posts" component={this.Posts} />
        <Stack.Screen name="Settings" component={SettingsScreen} />
      </Stack.Navigator>
    )
  }

  render = () => {
    const Main = createDrawerNavigator()
    return <NavigationContainer linking={{
      prefixes: ["myapp://"],
      config: {
        screens: {
          Home: {
            path: "",
            screens: {
              Posts: "posts",
            },
          },
        },
      }
    }}>
      <Main.Navigator
        drawerStyle={{ width: 0 }}
        initialRouteName={"Home"}
      >
        <Main.Screen name="Home" component={this.Home} />
      </Main.Navigator>
    </NavigationContainer>
  }
}

下面的链接将带您进入Home中的Posts屏幕:

Linking.openURL("myapp://posts")

我已经试过设置一个非空的路径名为Home,并做一些类似Linking.openURL("myapp://home/posts")的事情,但没有用。
我能让它工作的唯一方法是把所有的Post屏幕都放在Home的同一水平上,就在DrawerNavigator的内部。这已经是一个快速修复,但实际的应用程序结构需要我从安装在DrawerNavigator上的Home旁边的几个其他屏幕导航到Posts部分,并且能够goBack()到上述屏幕,所以顶级的Posts屏幕并不完全削减它。
我想要的结构基本上是这样的:

- Home
  -- FeaturedArticle
    -- Comments
      -- Comment
  -- ArticlesList
    -- Article
      -- Comments
        -- Comment
knsnq2tg

knsnq2tg1#

在这里,我附上我的代码片段,以便您可以有一个想法,以存档这件事在您的情况下

const linking = {
    prefixes: ['myDemoApp://'],
    config: {
      screens: {
        MyStack1: {
          path: 'MyStack1/:id?',
          parse: {
            id: id => `${id}`,
          },
        },
        MyStack2: {
          screens: {
            Stack22: 'Stack22/:id?',
          },
        },
      },
    },
  };

相关问题