动态 link 通过扫描二维码打开应用程序然后不会导航到不同的屏幕
Dynamic link through scan QR code open the app then won't navigate to different screen
我使用 React Native 创建的应用程序需要使用默认相机应用程序扫描二维码然后在应用程序中打开特定屏幕的功能,为了实现这一点,我还使用 React Native 设置了 Firebase 动态 links Firebase 库。
设置非常简单,动态 link 使用 Firebase 提供的域,link 还包含 url 格式 https://example.page.link/abc-xyz
的深层 link。
应用程序扫描 QR 后,它使用深度 link url 提取 abc-xyz
部分并导航到不同的屏幕,这是我的实现。
// App.js
const handleDynamicLink = link => {
const linkCheck = new RegExp('^https://example.page.link/.*$');
let title;
if (linkCheck.test(link.url)) {
title = link.url.substring(link.url.lastIndexOf('/') + 1).split('-');
RootNavigation.navigate(Screens.offer, { title: title });
}
};
...
React.useEffect(() => {
// Handler for background/quit events
dynamicLinks().getInitialLink().then(link => {
handleDynamicLink(link);
});
// Handler for foreground events
const unsubscribe = dynamicLinks().onLink(handleDynamicLink);
return () => unsubscribe();
}, []);
// RootNavigation.js
import * as React from 'react';
export const navigationRef = React.createRef();
export function navigate(name, params) {
navigationRef.current?.navigate(name, params);
}
已为 iOS 和 Android 配置了所有必要的设置,通过扫描 QR 码对 Android 设备进行测试,它识别 link 并导航到预期的屏幕,但不适用于 iOS,即使它理解 link 并且它只打开初始屏幕然后停在那里。
奇怪的是,如果我直接在设备浏览器中打开 link,它会打开预览页面,然后如果我单击“打开”按钮,它会打开应用程序并导航到目标屏幕。
想知道这是否与 iOS 本机端的导航内容有关?
原来我需要更新 AppDelegate.m
并为 iOS 添加 link 处理程序。
在 AppDelegate.m
中的 @end
行上方添加了以下代码。
// AppDelegate.m
- (BOOL)application:(UIApplication *)application
openURL:(NSURL *)url
options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
return [RCTLinkingManager application:application openURL:url options:options];
}
- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
{
return [RCTLinkingManager application:application
continueUserActivity:userActivity
restorationHandler:restorationHandler];
}
应用处于前台状态或已打开时的处理。
// App.js
if (Platform.OS === 'ios') {
Linking.addEventListener('url', handleDynamicLink);
}
当应用完全 closed/initiated 时由动态处理 link。
// App.js
if (Platform.OS === 'ios') {
Linking.getInitialURL()
.then(link => {
handleDynamicLink({ url: link });
})
.catch(error => {
// Error handling
});
} else {
// This part for Android
dynamicLinks().getInitialLink().then(link => {
handleDynamicLink(link);
});
}
我使用 React Native 创建的应用程序需要使用默认相机应用程序扫描二维码然后在应用程序中打开特定屏幕的功能,为了实现这一点,我还使用 React Native 设置了 Firebase 动态 links Firebase 库。
设置非常简单,动态 link 使用 Firebase 提供的域,link 还包含 url 格式 https://example.page.link/abc-xyz
的深层 link。
应用程序扫描 QR 后,它使用深度 link url 提取 abc-xyz
部分并导航到不同的屏幕,这是我的实现。
// App.js
const handleDynamicLink = link => {
const linkCheck = new RegExp('^https://example.page.link/.*$');
let title;
if (linkCheck.test(link.url)) {
title = link.url.substring(link.url.lastIndexOf('/') + 1).split('-');
RootNavigation.navigate(Screens.offer, { title: title });
}
};
...
React.useEffect(() => {
// Handler for background/quit events
dynamicLinks().getInitialLink().then(link => {
handleDynamicLink(link);
});
// Handler for foreground events
const unsubscribe = dynamicLinks().onLink(handleDynamicLink);
return () => unsubscribe();
}, []);
// RootNavigation.js
import * as React from 'react';
export const navigationRef = React.createRef();
export function navigate(name, params) {
navigationRef.current?.navigate(name, params);
}
已为 iOS 和 Android 配置了所有必要的设置,通过扫描 QR 码对 Android 设备进行测试,它识别 link 并导航到预期的屏幕,但不适用于 iOS,即使它理解 link 并且它只打开初始屏幕然后停在那里。
奇怪的是,如果我直接在设备浏览器中打开 link,它会打开预览页面,然后如果我单击“打开”按钮,它会打开应用程序并导航到目标屏幕。
想知道这是否与 iOS 本机端的导航内容有关?
原来我需要更新 AppDelegate.m
并为 iOS 添加 link 处理程序。
在 AppDelegate.m
中的 @end
行上方添加了以下代码。
// AppDelegate.m
- (BOOL)application:(UIApplication *)application
openURL:(NSURL *)url
options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
return [RCTLinkingManager application:application openURL:url options:options];
}
- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
{
return [RCTLinkingManager application:application
continueUserActivity:userActivity
restorationHandler:restorationHandler];
}
应用处于前台状态或已打开时的处理。
// App.js
if (Platform.OS === 'ios') {
Linking.addEventListener('url', handleDynamicLink);
}
当应用完全 closed/initiated 时由动态处理 link。
// App.js
if (Platform.OS === 'ios') {
Linking.getInitialURL()
.then(link => {
handleDynamicLink({ url: link });
})
.catch(error => {
// Error handling
});
} else {
// This part for Android
dynamicLinks().getInitialLink().then(link => {
handleDynamicLink(link);
});
}