Question

const HomeStack = createStackNavigator({
    Home: HomeScreen,
});

const CarStack = createStackNavigator({
    Booking: BookingScreen,
    Confirm: ConfirmScreen

});

export default createBottomTabNavigator({
    HomeStack,
    CarStack,
});

export default class HomeScreen extends React.Component {
    goTo(){
            this.props.navigation.navigate('Confirm')
    }
    render() {
        return (
            <View style={css.container}>
                <button onPress={this.goTo.bind(this)}>go to</button>
            </View>
        );
    }   
}



export default class ConfirmScreen extends React.Component {
    goBack(){
            this.props.navigation.goBack()
    }
    render() {
        return (
            <View style={css.container}>
                <button onPress={this.goBack.bind(this)}>goback</button>
            </View>
        );
    }   
}

在主屏幕中，当我单击goto时，需要我确认屏幕，这很好。但是，当我按返回时，它将带我到预订屏幕而不是主屏幕。不好它应该带我回到主屏幕。我在这里想念什么？

Answer 1

您必须定义2个单独的导航器，并检查另一个组件中的用户/访客。像这样：

Provider.js：

export default class Provider extends Component {
    render() {
        let {key, signedIn, checkedSignIn} = this.state
        return(
            <View>
                {
                    checkedSignIn
                        ? signedIn
                            ? <App />
                            : <SignedOut />
                        : null
                }
            </View>
        )
    }
}

App.js：

export default createStackNavigator({
    home: Home // sample
})

SignedOut.js：

export default createStackNavigator({
    auth: Auth // sample
})

Answer 2

如果您使用的是react-navigation v2.x或更高版本，请直接使用navigate方法进入Home屏幕。

自定义后退按钮的行为，并在this.props.navigation.navigate('Home')屏幕中按下后退按钮时调用Confirmation。这将达到预期的效果。

自react-navigation v2.0起，navigate的操作便不再那么费劲了。如果您指定的路由已在堆栈中，则将打开该屏幕，而不是默认情况下在堆栈中推送新的屏幕。

Reference

Answer 3

尝试一下：

this.props.navigtion.goBack('Home')

希望对您有帮助。

反应导航如何返回不同的堆栈

3 个答案: