react-navigation返回上一级不导航到上一个屏幕

时间:2018-09-25 09:41:15

标签: react-native react-navigation

我在我的本机应用程序中使用了新的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>
    )
}

App.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,但仍然无法正常工作。

3 个答案:

答案 0 :(得分:3)

这对我有用。

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

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

答案 1 :(得分:0)

能否将服务屏幕的代码放在调用goBack函数的位置,这可能会有所帮助。 通常,您只需调用this.props.navigation.goBack()或this.props.navigation.goBack(null),也可以尝试this.props.navigation.navigate('Dashboard')(如果它在堆栈,它将从服务屏幕返回上一屏幕,而不是将其推到顶部

答案 2 :(得分:0)

导航道具具有goBack助手。

class HomeScreen extends React.Component {
  render() {
    const {goBack} = this.props.navigation;
    return (
      <View>
        <Text>This is the home screen of the app</Text>
        <Button
          onPress={() => goBack()}
          title="Go to Brent's profile"
        />
      </View>
     )
   }
}