javascript - 如何在本机博览会中深度链接到特定屏幕
问题描述
我正在使用以下代码创建链接 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
地图到屏幕?
解决方案
是的,您需要监听 url 事件。请参阅 Expo 文档中有关深度链接的部分。https://docs.expo.io/versions/latest/workflow/linking/#handling-links-into-your-app
请注意,在 expo 配置中需要额外的配置选项才能在不同的设备上工作。有关这方面的所有说明,请参阅他们的文档。
从提供的链接引用
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)}`);
};
因为如果您的应用程序打开并单击链接与关闭应用程序时行为不同,您需要 2 个不同的入口点来处理链接。
在你HomeScreen
的组件里面你可以放这样的东西:
componentDidMount() {
// handle an initial url on app opening
Linking.getInitialURL().then(urlRedirect)
}
在您的应用程序中的某个地方,可能是app.js
应用程序内部新网址的处理程序。
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);
});
推荐阅读
- file - 在 Go 中使用相同的 *os.File 写入和读取文件
- firebase - 将图像从 Firebase 中的 Storage 链接到 CLOUD firestore 文档 Flutter
- c# - StreamReader 未将 MediaStream 转换为字符串
- error-handling - 使用 Xcode12.2 在 iOS11 上安装/更新 pod
- python-3.x - 使用opencv检测护照图像中的文本
- c# - EF Core:我可以在我的实体中将可为空的 SQL 类型映射到不可为空的值类型吗?
- django - 如何防止用户在 django 中提交后返回表单(所有表单登录、编辑帖子等)?
- python - 超声波范围传感器 (HC-SR04) 在 Raspberry Pi 上给出不一致的读数
- javascript - 反应 - 从状态数据计算总数
- pandas - numpy 数组到数据框,反之亦然