嵌套导航的深层链接（本机） [英] Deeplinking with a nested navigation (react-native)
问题描述
按照以下指南尝试为我的项目设置深层链接： https：// reactnavigation.org/docs/en/next/deep-linking.html
但是在尝试实施时，我总是看到主屏幕而不是帐户屏幕。
运行如下示例：
adb shell am start- W -a android.intent.action.VIEW -d hdsmobileapp：// main / account / com.digithurst.hdsapp
我有一个嵌套的导航，可以在下面看到：
import {createDrawerNavigator，createStackNavigator} from -导航;
从 ./components/NavigationOptions导入{NavigationOptions}；
从 ./components/SideMenu导入{SideMenu};
从 ./containers/LoginScreen导入LoginScreen；
从 ./containers/MainScreen导入MainScreen；
从 ./containers/MyAccountScreen导入MyAccountScreen；
从 ./containers/SplashScreen导入SplashScreen；
import {createAppContainer}来自反应导航；
const AppContainer = createAppContainer（
{
Splash：{
screen：SplashScreen，
navigationOptions：{
header： null，
}，
}，
登录：{
屏幕：createStackNavigator（
{
登录：{
屏幕：LoginScreen，
导航选项：{
header：null，
}，
}，
}，
）
}，
Main：{
屏幕：createDrawerNavigator（
{
Main：{
屏幕：createStackNavigator（
{
Main：{
屏幕：MainScreen，
navigationOptions：NavigationOptions.getSearchFilterHeader（ title.main），
}，
MyAccount：{屏幕：MyAccountScreen，路径：'account'，}，
$ b}，
），
}，
}，{
抽屉宽度： 300，
initialRouteName： Main，
contentComponent：SideMenu，
}，
），
}，
}，
）;
然后在App.tsx内包含以下内容：
import React，{Component} from react;
从 react-native-splash-screen导入SplashScreen；
从 react-redux导入{Provider}；
从 ./navigation导入RootStack；
从 ./navigation导入AppContainer；
从 ./store/store导入商店；从反应导航中导入
{createAppContainer}从反应本机中导入
{AppRegistry}；
类App扩展了组件{
public componentDidMount（）{
SplashScreen.hide（）;
}
public render（）{
return（
< Provider store = {store}>
< RootStack uriPrefix = {前缀} />
< / Provider>
）;
}
}
const前缀= hdsmobileapp：// hdsmobileapp；
const MainApp =（）=> < AppContainer uriPrefix = {prefix} /> ;;
AppRegistry.registerComponent（'App'，（）=> MainApp）;
导出默认应用程序；
这里是否有明显的我想念的东西？
您尚未将 path 道具添加到父导航器中。文档特别提到，当您嵌套导航器时，必须提供 path 道具。
如果我们嵌套了导航器，则需要为每个父屏幕提供一个路径。所有路径都将被串联起来，也可以是一个空字符串。
只要您不愿意，只需传递''null字符串将导航器添加到路径。
像这样更改路径的路由器配置 hdsmobileapp：// main / account / 工作，
const AppContainer = createAppContainer（
{
Splash：{
屏幕：SplashScreen，
navigationOptions：{
标头：null，
}，
}，
登录名：{
屏幕：createStackNavigator（
{
登录：{
屏幕：LoginScreen，
导航选项：{
标头：空，
}，
}，
}，
）
}，
M ainDrawer：{
屏幕：createDrawerNavigator（
{
MainStack：{
屏幕：createStackNavigator（
{
Main：{
屏幕：MainScreen，
navigationOptions：NavigationOptions.getSearchFilterHeader（ title.main），
}，
MyAccount：{屏幕：MyAccountScreen，路径： account，} ，
}，
），
路径： main
}，
}，{
抽屉宽度：300，
initialRouteName： Main，
contentComponent：SideMenu，
}，
），
路径：''，
}，
}，
）;
还应考虑重命名父级导航器，因为当您添加更多屏幕和导航时，它将导致错误。 / p>
最新的深层链接文档此处
Trying to set up deeplinking for my project following this guide: https://reactnavigation.org/docs/en/next/deep-linking.html
However when trying the implementation I always see the main screen instead of the account screen.
Running an example like this:
adb shell am start -W -a android.intent.action.VIEW -d "hdsmobileapp://main/account/" com.digithurst.hdsapp
I have a nested navigation which can be seen below:
import {createDrawerNavigator, createStackNavigator} from "react-navigation";
import {NavigationOptions} from "./components/NavigationOptions";
import {SideMenu} from "./components/SideMenu";
import LoginScreen from "./containers/LoginScreen";
import MainScreen from "./containers/MainScreen";
import MyAccountScreen from "./containers/MyAccountScreen";
import SplashScreen from "./containers/SplashScreen";
import { createAppContainer} from "react-navigation";
const AppContainer = createAppContainer(
{
Splash: {
screen: SplashScreen,
navigationOptions: {
header: null,
},
},
Login: {
screen: createStackNavigator(
{
Login: {
screen: LoginScreen,
navigationOptions: {
header: null,
},
},
},
)
},
Main: {
screen: createDrawerNavigator(
{
Main: {
screen: createStackNavigator(
{
Main: {
screen: MainScreen,
navigationOptions: NavigationOptions.getSearchFilterHeader("title.main"),
},
MyAccount: { screen: MyAccountScreen, path: 'account',},
},
),
},
}, {
drawerWidth: 300,
initialRouteName: "Main",
contentComponent: SideMenu,
},
),
},
},
);
And then inside App.tsx the following is included:
import React, {Component} from "react";
import SplashScreen from "react-native-splash-screen";
import {Provider} from "react-redux";
import RootStack from "./navigation";
import AppContainer from "./navigation";
import store from "./store/store";
import {createAppContainer} from 'react-navigation'
import { AppRegistry } from 'react-native';
class App extends Component {
public componentDidMount() {
SplashScreen.hide();
}
public render() {
return (
<Provider store={store}>
<RootStack uriPrefix={prefix} />
</Provider>
);
}
}
const prefix = 'hdsmobileapp://hdsmobileapp';
const MainApp = () => <AppContainer uriPrefix={prefix} />;
AppRegistry.registerComponent('App', () => MainApp);
export default App;
Is there something obvious that I am missing here?
You haven't added the path prop to the parent navigators. The docs specifically mention that you must provide path prop when you have nested navigators.
If we have nested navigators, we need to provide each parent screen with a path. All the paths will be concatenated and can also be an empty string.
Just pass '' null strings whenever you don't want to add the navigator to path.
Change your router configuration like this for your path hdsmobileapp://main/account/ to work,
const AppContainer = createAppContainer(
{
Splash: {
screen: SplashScreen,
navigationOptions: {
header: null,
},
},
Login: {
screen: createStackNavigator(
{
Login: {
screen: LoginScreen,
navigationOptions: {
header: null,
},
},
},
)
},
MainDrawer: {
screen: createDrawerNavigator(
{
MainStack: {
screen: createStackNavigator(
{
Main: {
screen: MainScreen,
navigationOptions: NavigationOptions.getSearchFilterHeader("title.main"),
},
MyAccount: { screen: MyAccountScreen, path: 'account',},
},
),
path:'main'
},
}, {
drawerWidth: 300,
initialRouteName: "Main",
contentComponent: SideMenu,
},
),
path: '',
},
},
);
Also consider renaming your parent navigators since it'll cause bugs when you add more screens and navigation.
Latest deep-linking documentation here
这篇关于嵌套导航的深层链接（本机）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
