React Native-React Navigation Deep Link在Android上不起作用

问题描述 投票:0回答:1

目前,我正在开发React Native Android项目,我想在某些页面上使用深层链接。但是以某种方式,链接始终重定向到登录页面,而不是注册页面。

已经尝试adb shell am start -W -a android.intent.action.VIEW -d "myapp://mobile/signup"

恐怕在嵌套导航中是错误的。

或者我应该在所有屏幕上放置path吗?因为我没有把全部都放]

“反应导航”:“ ^ 3.11.1”“本机”:“ 0.60.4”

router.js

const prefix = 'myapp://'
<Navigation ref={(comp) => (this.navigator = comp)} uriPrefix={prefix} />

navigation / index.js

const LoginStack = createStackNavigator(
    {
      LoginScreen: { screen: LoginScreen },
      SignUpScreen: { 
        screen: SignUpScreen,
        path: 'signup',
       },
      ForgotPasswordScreen: { screen: ForgotPasswordScreen },
    },
    {
      navigationOptions: { tabBarVisible: false },
    },
    {
      mode: "modal",
      header: null,
      transitionConfig: () => TransitionConfig,
    }
);

const AppNavigator = createBottomTabNavigator(
    {
      Default: {
        screen: HomeStack,
        navigationOptions: {
          tabBarIcon: ({ tintColor }) => (
            <TabBarIcon icon={Images.Icon} tintColor={tintColor} />
          ),
        },
      },
      LoginStack: { 
        screen: LoginStack,
        path: 'login', 
      },
    },
    {
      initialRouteName: 'Default',
      tabBarComponent: TabBar,
      tabBarPosition: "bottom",
      swipeEnabled: false,
      animationEnabled: false,
      tabBarOptions: {
        showIcon: true,
        showLabel: true,
        activeTintColor: Color.tabbarTint,
        inactiveTintColor: Color.tabbarColor,
      },
      lazy: true,
      navigationOptions: {
        gestureDirection: I18nManager.isRTL ? "inverted" : "default",
      },
    }
);

const AuthNavigator = createStackNavigator(
  {
    LoginScreen: { screen: LoginScreen },
    SignUpScreen: { 
      screen: SignUpScreen,
      path: 'signup', 
    },
  },
  {
    mode: "modal",
    header: null,
    transitionConfig: () => TransitionConfig,
  }
);

export default createAppContainer(
  Config.Login.RequiredLogin
    ? createSwitchNavigator(
        {
          AuthLoading: AuthLoadingScreen,
          App: AppNavigator,
          Auth: AuthNavigator,
        },
        {
          initialRouteName: "AuthLoading",
        }
      )
    : AppNavigator
);

AndroidManifest.xml

<activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:exported="true"
        android:launchMode="singleTask"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>

        <intent-filter>
            <action android:name="android.intent.action.VIEW" />
            <category android:name="android.intent.category.DEFAULT" />
            <category android:name="android.intent.category.BROWSABLE" />
            <data android:scheme="myapp" android:host="mobile" />
        </intent-filter>
      </activity>

任何帮助将不胜感激:)

android reactjs react-native react-navigation deep-linking
1个回答
0
投票

我在react-navigation 4.x中遇到了相同的问题。因此,我首先导航到要在深度链接中打开的屏幕,然后打开URL。对于您的情况,如果要登录时转到特定的url页面,并且经过一些过程导航以进行注册,则应首先导航至SignUp,然后转到url。下面的代码显示了我的打开URL的按钮

const goToWebPage = () => {
    props.navigation.navigate('SignUp');
    Linking.canOpenURL(`${paymentUrl}\/${id}`).then(supported => {
        if (supported) {
           Linking.openURL(`${paymentUrl}\/${id}`);
        } 
    });
 } 

我认为主要问题是在createSwitchNavigator中。在使用我的方法之前,请使用https://medium.com/react-native-training/deep-linking-your-react-native-app-d87c39a1ad5e方法,并通过将enableURLHandling={false}添加到导航器并禁用uriPrefix={prefix}来禁用深度链接,因此,如果它不起作用,请使用我的方法。

© www.soinside.com 2019 - 2024. All rights reserved.