带有反应导航的深层链接不起作用 [英] Deep Linking with react-navigation does not work

问题描述

实际上，我正在使用react-navigation 3.1.5在react-native 0.58上开发一个应用程序，但我无法使我的应用程序正常运行。

这是我的代码：

app-navigation.js

  const MainStack = createBottomTabNavigator（{
主页：{屏幕：主页}，
宠物：{屏幕：宠物，路径：'spidersecurity：// terque / pets'}，
通知：{屏幕：UserNotifications}，
 UpdateUser：{屏幕：UpdateUser}，
}）； 
 
 const AppStack = createStackNavigator（{
 MainStack：{屏幕：MainStack，路径：’}，
 PetStack：{屏幕：PetStack} 
}）; 
 
 const Main = createSwithNavigator（{
 App：{屏幕：AppStack，路径：’} 
}）; 
  

基本上这是我的导航结构。我已经将 AndroidManifest.xml 设置为以下内容：

 < ; intent-filter android：label = filter_react_native> 
< action android：name = android.intent.action.VIEW /> 
< category android：name = android.intent.category.DEFAULT /> 
< category android：name = android.intent.category.BROWSABLE /> 
< data android：scheme = spidersecurity android：host = terque /> 
< / intent-filter> 
  

然后，当我打开地址为 spidersecurity：// terque的链接时/ pets 此链接将打开应用程序，但不会导航到指定的屏幕。我不知道自己是否做得不好，但是我读过很多页面和博客都没有成功。

注意：我已经验证了'spidersecurity：// terque / pets'是否为路由匹配项，因为我在代码中添加 console.log 时获取链接

解决方案

您应该将URL的基础部分指定为带有标签的属性您导出的createAppContainer组件中的uriPrefix，并且在路径中仅包含URL terque / pets 的第二部分。

这里是他们的文档：

如果您的项目是使用Expo创建的

  const SimpleApp = createAppContainer（createStackNavigator（{...}））; 
 
 const前缀= Expo.Linking.makeUrl（’/’）; 
 
 const MainApp =（）=> < SimpleApp uriPrefix = {prefix} /> ;; 
  

如果您的项目是使用react-native init创建的

  const SimpleApp = createAppContainer（createStackNavigator（{...}））; 
 
 const prefix ='mychat：//'; 
 
 const MainApp =（）=> < SimpleApp uriPrefix = {prefix} /> ;; 
  

尝试一下，看看它是否有效，因为这是他们的文档指出应该这样做的方式。

我已经在示例项目中以这种方式进行了编码，当我使用他们建议的命令行指令进行测试时，它可以正常工作。 $ b

在仍在构建的实际应用中正确打开深层链接时，我仍然遇到问题，并且按照他们的建议进行了完全正确的编码，因此很可能是在其他地方引起了此问题。

我会尝试先更改您的代码以使其符合文档要求，如果这对本文不起作用，请告诉我我为我的应用找到什么解决方案弄清楚。

Actually, I'm developing an app on react-native 0.58 with react-navigation 3.1.5, and I can't make my app run properly.

This is my code:

app-navigation.js

const MainStack = createBottomTabNavigator({
  Home: { screen: Home },
  Pets: { screen: Pets, path: 'spidersecurity://terque/pets' },
  Notifications: { screen: UserNotifications },
  UpdateUser: { screen: UpdateUser },
});

const AppStack = createStackNavigator({
  MainStack: { screen: MainStack, path: '' },
  PetStack: { screen: PetStack }
});

const Main = createSwithNavigator({
  App: { screen: AppStack, path: '' }
});

Basically this is my navigation structure. I've setted my AndroidManifest.xml to the following:

<intent-filter android:label="filter_react_native">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="spidersecurity" android:host="terque" />
</intent-filter>

And, when I open a link with the address spidersecurity://terque/pets this link open the app, but it does not navigate to the specified screen. I don't know if I'm doing something bad, but I've read a lot of pages and blogs with no success.

NOTE: I was verified if 'spidersecurity://terque/pets' is the route matching because I add a console.log to my code when getting the Linking

解决方案

You should be specifying the base portion of the URL as a property labeled uriPrefix in the createAppContainer component you export and only have the second portion of the URL terque/pets in the 'path'.

Here is an example from their documentation:

If your project is created with Expo

const SimpleApp = createAppContainer(createStackNavigator({...}));

const prefix = Expo.Linking.makeUrl('/');

const MainApp = () => <SimpleApp uriPrefix={prefix} />;

If your project is created with react-native init

const SimpleApp = createAppContainer(createStackNavigator({...}));

const prefix = 'mychat://';

const MainApp = () => <SimpleApp uriPrefix={prefix} />;

Try that out and see if it works because that's the way their documentation indicates it should be done.

I've coded it that way in a sample project and when I test using their suggested command line instructions it works properly.

I am still having an issue having the deep link open properly in the actual app I'm building and I've coded it exactly as they suggest so it's possible the issue is being caused somewhere else.

I'd try changing your code to match their documentaiton first and if that doesn't work comment on this post and I'll let you know what solution I find for my app when I figure it out.

这篇关于带有反应导航的深层链接不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！