深层链接在React Native Expo上的嵌套React导航中不起作用

时间:2019-08-04 16:34:03

标签: react-native react-navigation expo deep-linking

  • 您正在运行什么代码,正在发生什么? xcrun simctl openurl booted exp://127.0.0.1:19000/--/postDetails/uT5EgK9DIF5HWIk9yUAn 它不会导航到详细页面,而是保留在主页中

我遵循了此链接中的说明-https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=2ahUKEwibnYjG0enjAhVEXRUIHQBoAXUQFjAAegQIABAB&url=https%3A%2F%2Freactnavigation.org%2Fdocs%2Fen%2Fdeep-linking.html&usg=AOvVaw0lIdiijbMo3-f2A8Tt4w4K

 render() {

        const HomeStack = createStackNavigator({
            home: createStackNavigator({
                home: {screen: HomePage},
                ytSearch: {
                    screen: YTSearch
                },
                composePost: {
                    screen: ComposePost
                }
            }, {
                mode: 'modal',
                headerMode: 'none',
                navigationOptions: {
                    header: null,
                    tabBarVisible: false
                }
            }),
            postDetails: {screen: PostDetails, path: '/postDetails/:id'},
            composeReply: ComposeReply,
            groupProfile: GroupProfilePage,
            profile: ProfilePage
        });


        HomeStack.navigationOptions = ({navigation}) => {

            let tabBarVisible = true;
            if (navigation.state.index > 0) {
                tabBarVisible = false;
            }
            return {
                tabBarIcon: ({tintColor}) => <HomeIcon tintColor={tintColor}/>,
                tabBarVisible
            }
        };

        const
            SubscriptionStack = createStackNavigator({
                screen: SubscriptionPage,
                postDetails: {screen: PostDetails, path: '/postDetails/:id'},
                composeReply: ComposeReply
            });

        SubscriptionStack
            .navigationOptions = ({navigation}) => {
            let tabBarVisible = true;
            if (navigation.state.index > 0) {
                tabBarVisible = false;
            }
            return {
                tabBarIcon: ({tintColor}) => <Icon name="subscriptions" size={26} color={tintColor} type="material"/>,
                tabBarVisible
            }
        };

        const
            HomeNavigator = createBottomTabNavigator({
                home: {screen: HomeStack, path: ''},
                subscription: SubscriptionStack,
                search: {screen: SearchPage},
                notifications: {screen: NotificationsPage}
            }, {});


        const
            RootNavigator = createSwitchNavigator({
                welcome: {screen: WelcomePage},
                login: createStackNavigator({
                    auth: {screen: AuthPage},
                    signUp: {screen: SignUpPage},
                    resetPassword: {screen: ResetPasswordPage}
                }),
                main: createDrawerNavigator({
                        home: {
                            screen: HomeNavigator,
                            path: ''
                        },
                        profile: createStackNavigator({
                            profile: ProfilePage,
                            postDetails: {screen: PostDetails, path: '/postDetails/:id'},
                            composeReply: ComposeReply
                        }),
                        following: createStackNavigator({
                            following: FollowingPage,
                            createGroup: CreateGroupPage,
                            groupProfile: {
                                screen: GroupProfilePage
                            },
                            postDetails: {screen: PostDetails, path: '/postDetails/:id'},
                            composeReply: ComposeReply
                        }, {
                            navigationOptions: {
                                headerMode: 'none'
                            }
                        }),
                        bookmarks: createStackNavigator({
                            screen: BookmarksPage,
                            postDetails: {screen: PostDetails, path: '/postDetails/:id'},
                            composeReply: ComposeReply
                        }),
                        contact: {
                            screen: ContactPage,
                        },
                        info: {
                            screen: InfoPage,
                        },
                        conduct: {
                            screen: ConductPage,
                        }
                    },
                    {
                        contentComponent: SideMenuPage,
                        drawerWidth: 250,
                        defaultNavigationOptions: ({navigation}) => {
                            return {
                                headerLeft: (
                                    <Icon
                                        style={{paddingLeft: 10}}
                                        onPress={() => navigation.openDrawer()}
                                        name="menu"
                                        size={30}
                                    />
                                )
                            };
                        }
                    }
                )
            }, {
                lazy: true
            });

        const
            WrapperNavigator = createAppContainer(RootNavigator);

        const prefix = Linking.makeUrl("/");

        if (this.state.isReady) {
            return (
                <Provider store={store}>
                    <StyleProvider style={getTheme(variables)}>
                        <Root>
                            <WrapperNavigator uriPrefix={prefix}/>
                        </Root>
                    </StyleProvider>
                </Provider>
            );
        } else {
            return <AppLoading/>
        }
    }

0 个答案:

没有答案