如何解决深层链接启动应用程序,但错误地处理外部网址
我正在开发一个 React Native 项目,使用 React-Navigation v5。
我现在尝试实现深层链接功能。我按照 official instruction 设置深层链接成功(我的意思是该应用程序是通过自定义 url 方案启动的)。接下来我需要处理外部链接,我的问题就出现在这一点上。
为了在我的 react-native 项目中处理外部链接,我也遵循了指令 configure links。
我在我的项目中定义了一个 linking.js:
const config = {
screens: {
// I explained why I nest FooScreen like this if you continue reading
FeatureFlow: {
SubfeatureFlow: {
FooScreen: {
path: 'foo/:myId',},};
const linking = {
prefixes: ['myapp://mobile'],config,};
export default linking;
然后,在我的 NavigationContainer
中,我使用如下链接:
return (
<NavigationContainer
linking={linking}
...
>
<MainFlow />
</NavigationContainer>
正如你在上面看到的,三件事情值得注意:
-
在 linking.js 中,在
config
中,我指定了路径,例如foo/123
应打开屏幕FooScreen
。 -
FooScreen
是一个嵌套屏幕。 -
NavigationContainer
包含一个名为MainFlow
的组件。
为了说明 FooScreen
如何嵌套在导航层次结构中,让我们从 MainFlow
开始,它看起来像这样:
const MainFlow = ({navigation}) => {
const Drawer = createDrawerNavigator();
return (
<Drawer.Navigator
...>
<Drawer.Screen name="FeatureFlow" component={MyFeatureFlow} />
...
</Drawer.Navigator>
);
};
如您所见,MainFlow
是一个 DrawerNavigator
,它承载一个名为 FeatureFlow
的屏幕,引用组件 MyFeatureFlow
。
MyFeatureFlow
看起来像这样:
const MyFeatureFlow = ({navigation}) => {
const FeatureStack = createStackNavigator();
return (
<FeatureStack.Navigator
...>
<FeatureStack.Screen
name="SubfeatureFlow"
component={MySubfeatureFlow}/>
</FeatureStack.Navigator>
)
如上所示,FeatureFlow
是一个堆栈导航器,它承载一个名为 SubfeatureFlow
的屏幕,引用组件 MySubfeatureFlow
。
而 MySubfeatureFlow
就像:
const MySubfeatureFlow = ({navigation}) => {
const SubfeatureStack = createStackNavigator();
return (
<SubfeatureStack.Navigator
...>
<SubfeatureStack.Screen
name="FooScreen"
component={MyFooScreen}
</SubfeatureStack.Navigator>
)
如上所示,MySubfeatureFlow
是另一个堆栈导航器,它托管一个名为 FooScreen
的屏幕,引用组件 MyFooScreen
。
现在您明白为什么在 linking.js 配置中,FooScreen
是这样嵌套的。
然后,我在 iOS 模拟器上运行我的应用程序。该应用程序启动。我在模拟器上杀死了应用程序。
然后,我运行命令 npx uri-scheme open myapp://mobile/foo/123 --ios
。 (我也试过打开手机浏览器,输入网址myapp://mobile/foo/123
,同样报错)
我在模拟器上看到,应用程序是通过命令启动的,这意味着我的深层链接已设置。但是,处理外部链接以打开 FooScreen
失败,最终出现以下错误:
该错误告诉我导航负载尝试将 123
视为屏幕,而应用将 foo
视为我项目中的屏幕名称。我完全不明白为什么会这样。我的链接配置有问题吗?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。