无法使用反应导航V3设置深度链接

时间:2018-11-23 04:16:00

标签: react-native react-navigation

我尝试按照官方文档的参考实现Deep Linking

我已经在XCode上完成了IOS配置。

但是,当我粘贴网址mychat://chat时,它将打开我的A screen而不是Second屏幕。我测试了initialRouteName: 'Second'可以正常工作。

所以我无法弄清楚我缺少哪一步。

这是我的Router.js:

import { createMaterialTopTabNavigator, createStackNavigator, 
  createDrawerNavigator, createTabNavigator,
  createBottomTabNavigator, createAppContainer
} from 'react-navigation';
import React, { Component } from 'react';
import { Platform } from 'react-native';
import A from './components/A';
import B from './components/B';
import Second from './components/Second';
import DrawerPanel from './components/DrawerPanel';

const Stack = createStackNavigator({
  A: {
    screen: createBottomTabNavigator({
      'A Screen': A,
      'B Screen': B
    },
    {
      swipeEnabled: false,
      lazyLoad: false,
      tabBarOptions: {
        activeTintColor: 'tomato',
        inactiveTintColor: 'gray',
          tabStyle: {
            width: 125,
            height: 50
        },
        scrollEnabled: true 
      }  
    })
  },
  Second: {
    screen: Second,
    // path: 'chat/:user'
    path: 'chat'
  }
},
  {
    initialRouteName: 'A',
    headerMode: 'screen'
  }
);
// combine DrawerPanel
const Router = createDrawerNavigator({
  FirstScreen: {
    screen: Stack
  }
},
{
  contentComponent: DrawerPanel,
  drawerWidth: 200
});

// about Deep linking
const prefix = Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://';
const SimpleApp = createAppContainer(Router);
const MainApp = () => <SimpleApp uriPrefix={prefix} />;

export default MainApp;

我的React Native依赖项:

  "dependencies": {
    "react": "16.3.1",
    "react-native": "0.55.4",
    "react-native-gesture-handler": "^1.0.9",
    "react-navigation": "^3.0.0"
  },

任何帮助将不胜感激。预先感谢。

1 个答案:

答案 0 :(得分:0)

您必须在View的父级中将路径设置为'',在这种情况下,您应该这样重写路由器:

const Router = createDrawerNavigator({
  FirstScreen: {
    screen: Stack,
    path: ''
  }
},
{
  contentComponent: DrawerPanel,
  drawerWidth: 200
});