反应导航返回不导航到上一个屏幕

Question

我在我的react-native应用程序中使用新的react-navigation 2.16.0。

我有欢迎（登录和注册）屏幕，然后是主堆栈。主堆栈包括成功验证（登录\注册）后的所有屏幕。

MainStack = createStackNavigator(
            {
                Welcome: {
                    screen: Welcome, navigationOptions: {
                        gesturesEnabled: false,
                    }
                },
                Main: {
                    screen: App, navigationOptions: {
                        gesturesEnabled: false,
                    }
                }



            }, {
                headerMode: 'none',
                lazy: true,
                initialRouteName: UserStore.token ? 'Main' : 'Welcome',
                gesturesEnabled: false,
                cardStack: {
                    gesturesEnabled: false
                },
                cardStyle: {
                    elevation: 0,
                    shadowOpacity: 0,
                    borderBottomWidth: 0,
                    borderTopWidth: 0

                },
                transitionConfig: () => ({
                    containerStyle: {
                        elevation: 0,
                        shadowOpacity: 0,
                        borderBottomWidth: 0,
                        borderTopWidth: 0
                    }
                }),
            }
        )`

主堆栈渲染

render() {


    // const splashDone = this.state.splashDone && this.state.backSplash
    const ready = UserStore.storeHydrated

    console.log('Current Routes', NavigationStore)
    // console.log('AppStore.loading ', AppStore.loading)
    return (
        <View style={{ flex: 1,backgroundColor:'transparent'}}>
        <StatusBar
            barStyle="light-content"
        />
            {!splashDone ? <SplashScreen /> : null}

            {ready &&
                <Provider {...stores}>

                    <MainStack 

                    />

                </Provider>}

            <InternetConnectionPopUp />

            {AppStore.loading ?
                <Spinner
                    color={colors.yellow}
                    style={{ position: 'absolute', right: 0, left: 0, top: 0, bottom: 0, zIndex: 99999 }} />
                : null}

            <View style={Platform.OS === 'ios' && this.state.flag ? { height: calcSize(25) } : {}} />
        </View>
    )
}

应用程序.js

    import React, { Component } from 'react'
import { BackHandler, Alert, AppState, View,Keyboard } from 'react-native'
import { inject, observer } from 'mobx-react/native'
import { AppStack } from '../../routes'
import { NavigationActions } from 'react-navigation'
import { Header } from '../../components';
let popupOpen = false

@inject('AppStore') @observer
class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            appState: AppState.currentState,
            nowMounted: false

        }
        this.goBack = this.goBack.bind(this)

    }

    goBack() {
        this.props.navigation.goBack(null)
    }

    componentWillMount() {
        this.setState({ nowMounted: true })
    }






    render() {
        return (
            <View style={{ flex: 1 }}>
                <Header  onPressBack={this.goBack}/>
                <AppStack/>
            </View>
        )
    }
}

export default App

AppStack.js

import {
    Dashboard,
    Services,
    Schedule,
    ScheduleDays,
    ScheduleTime,
    CancelAppointment
} from '../screens'
import { createStackNavigator, NavigationActions } from 'react-navigation'

export const AppStack = createStackNavigator({

    Dashboard: { screen: Dashboard, navigationOptions: {
        gesturesEnabled: false,
    } },

    Services: { screen: Services, navigationOptions: {
        gesturesEnabled: false,
    } },
    Schedule: { screen: Schedule, navigationOptions: {
        gesturesEnabled: false,
    } },
    ScheduleDays: { screen: ScheduleDays, navigationOptions: {
        gesturesEnabled: false,
    } },
    ScheduleTime: { screen: ScheduleTime, navigationOptions: {
        gesturesEnabled: false,
    } },
    CancelAppointment: { screen: CancelAppointment, navigationOptions: {
        gesturesEnabled: false,
    } },
}, {
    headerMode: 'none',
    initialRouteName: 'Dashboard',
    lazy: true,
    gesturesEnabled: false,
    cardStack: {
        gesturesEnabled: false
    },

})

goBack 在 createStackNavigator 中不起作用，它停留在同一屏幕中。返回根本不起作用。当我从仪表板导航到服务屏幕，然后按服务中的 onBack 时，它什么也不做。我也尝试将 createStackNavigator 更改为 createSwitchNavigator 但仍然不起作用。

Answer 1

您能否将调用 goBack 函数的服务屏幕的代码放在其中，这可能会有所帮助。一般情况下你只要打电话

this.props.navigation.goBack() 

或者

this.props.navigation.goBack(null) 

你也可以尝试

this.props.navigation.navigate('Dashboard')

如果它在堆栈的历史记录中，它将从服务屏幕返回到上一个屏幕，而不是将其推到顶部

Answer 2

这对我有用。

  <Button
      title="go back"
      onPress={(props) => { this.props.navigation.goBack(null) }}
  />

不要忘记删除this功能组件。