简单示例Expo / React导航5

Question

我正在尝试找出一个简单的例子，使用Deep Linking with Expo和React Navigation5，文档对我并没有真正的帮助。

(1)当我转到exp://192.168.2.130:19000 ->时，这已经打开了我的应用程序。好的

(2)现在我想添加一个/News-route，以便在打开exp://192.168.2.130:19000/News时呈现News-Screen (参见下面的代码)。

基于下面的例子，我如何做到这一点呢？

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

在这里的react导航文档中有更多详细信息：https://reactnavigation.org/docs/configuring-links