Question

我在我的本机应用程序中使用了新的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，但仍然无法正常工作。

Answer 1

这对我有用。

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

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

Answer 2

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

Answer 3

导航道具具有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>
     )
   }
}

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

3 个答案: