React Native分支当应用程序杀死/关闭时，深层链接不能导航到特定的屏幕(React Native Naviga

Question

我正在实现分支。在我的项目中，我已经按照文档配置了分支，并在其他参考文献的帮助下，如:React导航v5:如何使用branch .io

当导航器尚未创建时，如何从链接(与branch.io的深度链接)导航?

当我点击分支链接应用程序打开，但没有重定向到特定的屏幕，下面是我在终端收到的警告

从URL解析的导航状态包含根导航器中不存在的路由。这通常意味着链接配置与导航结构不匹配。有关如何指定链接配置的详细信息，请参阅https://reactnavigation.org/docs/configuring-links。

这是我从分支得到的参数的响应。io链接(App在分支仪表板中配置为通用链接)

{"$canonical_url";https://myApp.test-app.link/StartupDetailReport";$marketing_title";deeplinktest15";$og_description";deepdescription";$ one_time_usage "; false;;+click_timestamp"; 1668166318;;+clicked_branch_link"; true;;+is_firstrongession";+match_guaranteed"; true， "+rn_cached_initial_event": true， ";"goldy2";~channel";deal";~creation_source"; 1;;~feature";;marketing&;;; "~id"; 1119283322135719300; "~marketing&;; true; "~referring_link";;https://myApp.test-app.link/CbCDkMqxQub"; "~ tag&;; ["dfdf"]}

下面是我的App.js的navigationContainer配置的完整代码

import React from 'react';
import {Linking, Text} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import HomeScreen from './src/HomeScreen';
import ChatScreen from './src/ChatScreen';
import DealScreen from './src/DealScreen';
import ProfileScreen from './src/ProfileScreen';
import branch from 'react-native-branch';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
const config = {
screens: {
HomeTab: {
screens: {
Home: 'home',
Chat: {
path: 'feed',
},
Deal: 'StartupDetailReport',
},
},
Profile: 'user',
},
};
const linking = {
prefixes: ['myApp://', 'https://myApp.test-app.link'],
subscribe(listener) {
branch.subscribe(({error, params, uri}) => {
if (error) {
console.error('Error from Branch: ' + error);
return;
}
if (params['+non_branch_link']) {
const nonBranchUrl = params['+non_branch_link'];
// Route non-Branch URL if appropriate.
return;
}
if (!params['+clicked_branch_link']) {
// Indicates initialization success and some other conditions.
// No link was opened.
return;
}
// A Branch link was opened
const url = params.$canonical_url;
listener(url);
});
return () => {
branch.unsubscribe();
};
},
config,
};
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
function HomeTab() {
return (
<Tab.Navigator
screenOptions={{
headerShown: false,
}}>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Chat" component={ChatScreen} />
<Tab.Screen name="Deal" component={DealScreen} />
</Tab.Navigator>
);
}
const App = () => {
return (
<NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
<Stack.Navigator initialRouteName="HomeTab">
<Stack.Screen name="HomeTab" component={HomeTab} />
<Stack.Screen name="Profile" component={ProfileScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;

我希望当我点击分支链接时，它应该带我到这个"StartupDetailReport"屏幕

注意:当应用程序处于后台模式时，我的应用程序正常工作，一旦我杀死/关闭应用程序并从分支链接打开，它就不会像预期的那样工作。

请帮帮我，我不知道我的代码有什么问题谢谢。

Answer 1

您还需要使用async getInitialURL() '。它专门用于应用程序最初打开时。

所以像这样的东西应该对你有用，就像它对我有用一样:

const linking = {
prefixes: ...,
subscribe() { ... },
async getInitialURL() {

const params = await branch.getLatestReferringParams();
if (params.$canonical_url) return params.$canonical_url

// As a fallback, you may want to do the default deep link handling
const url = await Linking.getInitialURL();
return url;
}
}