react-native - React Navigation v.5 为深度链接配置正确的状态对象

Question

在我的应用程序中处理深层链接时遇到问题。我相信我传递给useLinking的配置变量不正确。我的导航结构如下：

App.js（简化）

const App = () => {

    const {state} = useContext(UserContext);
    const [isReady, setIsReady] = React.useState(false);
    const [initialState, setInitialState] = React.useState();
    const ref = React.useRef();

    const config = {
        Home: {
          path: 'home',
          screens:{
            HomeDetails: {
              path: 'details/:id',
              parse: {
                id: Number
              }
            },
            ContentPlay: {
              path: 'content/:cid',
              parse: {
                cid: Number
              }
            }
          }
        }
    };


    const { getInitialState } = useLinking(ref, {
        prefixes: ['http://example.com', 'https://example.com'],
        config
    });



    useEffect(() => {
        getInitialState()
        .catch(() => {})
        .then(state => {
            if (state !== undefined) {
                setInitialState(state);
            }
            setIsReady(true);
        });
    }, [getInitialState]);


    if (!isReady){
        return <LoadingScreen />;
    }
    return (
       <NavigationContainer ref={ref} initialState={initialState} >
           {state.user.token === '' ? <LoginStack/> : <MainStack/>}
       </NavigationContainer>
   );
};

MainStack.js（简化）

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

function DrawerNav() {

    return (
        <Drawer.Navigator 
          initialRouteName='Home'
          drawerContent={props => CustomDrawerContent()}>
        <Drawer.Screen 
          name="Home" 
          component={HomeScreen}/>
        <Drawer.Screen 
          name="Content" 
          component={ContentScreen}/>
        </Drawer.Navigator>
    );
}

const MainStack = () => {
    return (
        <Stack.Navigator
          initialRouteName="DrawerNav">
        <Stack.Screen
          name="DrawerNav"
          component={DrawerNav}/>
        <Stack.Screen
          name="HomeDetails"
          component={HomeDetailsScreen}/>
        <Stack.Screen
          name="ContentPlay"
          component={ContentPlayScreen}/>
        </Stack.Navigator>
    );
}


export default MainStack;

我的导航设置方式，用户可以通过抽屉导航在主屏幕和内容屏幕之间来回切换。在 Home 中，用户可以将 HomeDetails 屏幕推送到堆栈上。从 HomeDetails，他们只能返回（弹出）到 Home。他们无法导航到 Content 或 ContentPlay 屏幕。同样，从 Content 中，用户可以将 ContentPlay 屏幕推送到堆栈上。从 ContentPlay 他们只能返回到 Content。

我的问题是我无法获得任何深层链接来导航到 HomeDetails 或 ContentPlay，而 Home 或 Content 位于导航堆栈的根目录。我认为我的配置是错误的。关于深度链接的react-navigation 文档指出“重要的是要注意状态对象必须与嵌套导航器的层次结构相匹配。否则状态将被丢弃。”

我还尝试了另一个配置值，它可以深度链接到 HomeDetails 或 ContentPlay，但是当应用程序被冷打开（已被杀死）时，它会将这些屏幕放在导航堆栈的根目录，因此单击后退按钮会给我一个导航错误。执行此操作的配置值是：

const config = {
  HomeDetails: {
    path: "details/:id",
    parse: {
      id: Number
    }
  },
  ContentPlay: {
    path: 'content/:cid',
    parse: {
      cid: Number
    }
  }
};

标签： react-nativenavigation-drawerreact-navigationdeep-linkingstack-navigator