简单示例Expo / React Navigation 5

Question

我正在尝试使用将深度链接与Expo和React Navigation 5结合使用的简单示例。该文档并不能真正帮助我。

（（1）当我进入exp：//192.168.2.130：19000->时，这已经打开了我的应用程序。好

（（2）现在我想添加/ News-route，以便当我打开exp：//192.168.2.130：19000 / News时我渲染新闻屏幕（请参见下面的代码）。

如何根据下面的示例来做到这一点？

import { Linking } from 'expo';

const prefix = Linking.makeUrl('/');

export default function App() {

  const linking = {
    prefixes: [prefix]
  }

  return (
    <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
      <Tab.Navigator>
        <Tab.Screen name="EventExplore" component={EventExploreStack} />
        <Tab.Screen name="MyTasks" component={MyTasksScreen} />
        <Tab.Screen name="News" component={NewsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Answer 1

您可以使用所需的路径映射屏幕名称。例如，重新使用这段代码。

    import { Linking } from 'expo';

    const prefix = Linking.makeUrl('/');

    export default function App() {

      const linking = {
        prefixes: [prefix],
        config: {
          News: "/News"
        }
      }

      return (
        <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
          <Tab.Navigator>
            <Tab.Screen name="EventExplore" component={EventExploreStack} />
            <Tab.Screen name="MyTasks" component={MyTasksScreen} />
            <Tab.Screen name="News" component={NewsScreen} />
          </Tab.Navigator>
        </NavigationContainer>
      );
    }

此处有反应导航文档中的更多详细信息：https://reactnavigation.org/docs/configuring-links