如何在 react-native expo 中深入 link 到特定屏幕

Question

我正在使用以下代码创建 link URL：

Linking.makeUrl('lobby/', {
  roomId: params.roomId
})

输出以下内容：exp://192.168.0.31:19000/--/lobby/?roomId=1585512451

这在本地运行良好，但似乎只能打开我的应用程序的主页。

我已经在我的 app.js 中定义了屏幕

const Stack = createStackNavigator();

function App() {  
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen 
          name="Home" 
          component={HomeScreen} 
        />
        <Stack.Screen 
          name="Lobby"
          component={LobbyScreen} 
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

我是否需要使用某种偶数侦听器重定向到大厅屏幕，或者传递到 makeUrl 的路径是否应该映射到屏幕？

Answer 1

是的，您需要监听 url 事件。请参阅 Expo 文档中有关深度 linking 的部分。 https://docs.expo.io/versions/latest/workflow/linking/#handling-links-into-your-app

请注意，您需要在 expo 配置中使用其他配置选项才能在不同的设备上运行。有关这方面的所有说明，请参阅他们的文档。

引用自link提供

Handling links into your app
There are two ways to handle URLs that open your app.

1. If the app is already open, the app is foregrounded and a Linking event is fired
You can handle these events with Linking.addEventListener('url', callback).

2. If the app is not already open, it is opened and the url is passed in as the initialURL
You can handle these events with Linking.getInitialURL -- it returns a Promise that resolves to the url, if there is one.

来自他们的示例代码：

let redirectUrl = Linking.makeUrl('path/into/app', { hello: 'world', goodbye: 'now' });

然后您需要使用事件处理程序

处理URL

_handleUrl = url => {
  this.setState({ url });
  let { path, queryParams } = Linking.parse(url);
  alert(`Linked to app with path: ${path} and data: ${JSON.stringify(queryParams)}`);
};

因为打开您的应用程序并单击 link 与关闭该应用程序的行为不同，您需要 2 个不同的入口点来处理 link。

在你的 HomeScreen 组件中你可以放这样的东西：

    componentDidMount() {
        // handle an initial url on app opening
        Linking.getInitialURL().then(urlRedirect)
    }

在您的应用程序中的某处，也许在 app.js 中为应用程序内部的新 url 放置一个处理程序。

function urlRedirect(url) {
    if(!url) return;
    // parse and redirect to new url
    let { path, queryParams } = Linking.parse(url);
    console.log(`Linked to app with path: ${path} and data: ${JSON.stringify(queryParams)}`);
    this.navigation.replace(path, queryParams);
}

// listen for new url events coming from Expo
Linking.addEventListener('url', event => {
    urlRedirect(event.url);
});

如何在 react-native expo 中深入 link 到特定屏幕

How to deep link to specific screen in react-native expo

javascript

deep-linking

react-native

expo