Question

我试图在React Native中从一个堆栈导航到另一个堆栈。如何从我的LoginStack导航到ReleaseDetail的{{1}}屏幕？我想导航到HomeStack的屏幕ReleaseDetail，而不是在LoginStack中打开ReleaseDetail的模式。

我正在使用HomeStack v3。我尝试使用NavigationActions转到主堆栈，但是当它尝试导航时，出现react-native-navigation错误，提示该组件已卸载。

LoginStack.js：

no-op

Router.js：

    onDetailButtonPress={() => {
        const { selectedReleaseId } = this.props.playQueue
        this.props.navigation.navigate(
          NavigationActions.navigate({
            routeName: 'HomeStackView',
            params: { releaseId: selectedReleaseId },
            action: NavigationActions.navigate({ routeName: 'ReleaseDetail' })
          })
        )
        )
    }}

HomeStack.js：

export const appContainer = createAppContainer(
    createSwitchNavigator(
        {
            AuthLoading: AuthLoadingScreen,
            SignedOutStack: SignedOutStack,
            LoggedInStackView: LoggedInStack,
            HomeStackView: HomeStack,
            Onboard: OnboardStack
        },
        {
            initialRouteName: 'AuthLoading'
        }
    )
)

LoginStack.js：

const HomeStack = createStackNavigator(
    {
        Home: {
            screen: HomeScreen
        },
        Settings: {
            screen: SettingsScreen
        },
        ReleaseDetail: {
            screen: ReleaseInfoContainerScreen
        },
        SettingOnboard: {
            screen: OnboardStack
        }
    },
    {
        headerMode: 'none'
    }
)

Answer 1

尝试使用“ withNavigation”包装组件（即，您要导航的页面和要导航的页面）

例如如果要从PlayerScreen导航到HomeScreen 导出PlayerScreen和HomeScreen时，

import { withNavigation } from 'react-navigation' 然后在导出组件时使用

export default withNavigation(PlayerScreen)

export default withNavigation(HomeScreen)

然后使用NavigationActions

我希望这会有所帮助

Answer 2

使用console.log检查输出以查看是否具有导航功能。

在LoginStack.js中添加一个console.log("PROPS", this.props)，然后检查结果以查看其是否链接到导航。

在不同堆栈之间导航

2 个答案: