android 使用嵌套导航进行深度链接(react-native)

ymdaylpp  于 2023-02-10  发布在  Android
关注(0)|答案(3)|浏览(213)

尝试按照以下指南为我的项目设置深链接: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 "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,

                    },
                ),
            },
        },

    );

然后在App.tsx中包含以下内容:

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;

有什么明显的东西我错过了吗?

xxhby3vn

xxhby3vn1#

导航声明中未指定您提供的url的main部分(hdsmobileapp://main/account/)。
您应该将其添加到uriPrefix prop 中,或者避免它在尝试到达/account位置时经过该 prop 。

adb shell am start -W -a android.intent.action.VIEW -d "hdsmobileapp://account/" com.digithurst.hdsapp
6g8kf2rb

6g8kf2rb2#

您还没有将path属性添加到父导航器中,文档特别提到当您嵌套导航器时必须提供path属性。
如果我们有嵌套的导航器,我们需要为每个父屏幕提供一个路径。所有的路径将被连接起来,也可以是空字符串。
只要在不想添加导航器到path时传递''空字符串即可。
如下所示更改路由器配置以使路径hdsmobileapp://main/account/正常工作,

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: '',
        },
    },
);

也可以考虑重命名你的父导航器,因为当你添加更多的屏幕和导航时,这会导致bug。
最新深度链接文档here

tuwxkamq

tuwxkamq3#

我也遇到过同样的问题,以下做法对我有帮助

  • 从导航堆栈根目录的组件(您在其中配置深度链接)中,添加以下代码:
const ApplicationNavigator = () => {

  
  useEffect(() => {
    // THIS IS THE MAIN POINT OF THIS ANSWER
    const navigateToInitialUrl = async () => {
      const initialUrl = await Linking.getInitialURL()
      if (initialUrl) {
        await Linking.openURL(initialUrl)
      }
    }
    navigateToInitialUrl()
  }, [])

  const linking = {
    prefixes: ['<your_custom_scheme>://'],
    config: {
      /* configuration for matching screens with paths */
      screens: {},
    },
  }

  return (
    // Your components/navigation setup
  )
}

很显然,你的应用程序收到了URL,但不知何故“使用”它将应用程序从后台唤醒。当它在前台时,useEffect运行并使用URL导航到预期的屏幕。
PS:确保你的链接树与你的应用树匹配

相关问题