React-native-navigation: goBack() doesn't work

问题

I use React Navigation with Redux in React Native. Navigation is working fine, but on one screen the goBack() function doesn't work. Can you tell we why?

This is the header config:

static navigationOptions = {
        header: ({ state, goBack }) => {
            return {
                title: state.params.name,
                right: (<Button
                    title={'Done'}
                    onPress={() => goBack()}
                />)

            }
        }
    }

This is the dispatched event:

No Screen is poped off. The Screen on the device stays the same.

回答1:

Try <Button onPress={() => this.props.navigation.goBack(null)}>

when null is used as input parameter it will bring you to the last page(immediate history) and it helps in situations where nested StackNavigators to go back on a parent navigator when the child navigator already has only one item in the stack.

They may change in future because according to their documentation there are planning to change it.

For more information check here .

回答2:

I think, if you want to use the goBack() action you have to to something like this in your View (not header)

<Button onPress={() => this.props.navigation.goBack()}>

回答3:

GoBack is a bit flaky, excplicitly dispatching the action worked for me.

import { NavigationActions } from 'react-navigation';

this.props.navigation.dispatch(NavigationActions.back())

回答4:

I have the same problem. I do not know why but writing goBack(null) works for me :|

回答5:

Here is the working solution posted in the github issue:

setTimeout(this.props.navigation.goBack, 0)

Apparently this bug is a recent regression.

回答6:

Here is a solution for this.

this is my working code :-

static navigationOptions = ({navigation, screenProps}) => {
     return {
         title:'SECOND',
         headerStyle:{ backgroundColor: '#ffffff'},
         headerTitleStyle:{fontSize:12},
         headerLeft:<TouchableOpacity onPress={()=>navigation.goBack()}>
                      <Image source={{uri:'back_btn'}} style={{height: 20, width: 20,marginLeft:10,}}/>
                  </TouchableOpacity>
     }
  }

回答7:

According to a solution posted on this github issue. Passing null as an argument to the goBack function should work just fine as it did for me. The following code should work in case of OP:

static navigationOptions = {
        header: ({ state, goBack }) => {
            return {
                title: state.params.name,
                right: (<Button
                    title={'Done'}
                    onPress={() => goBack(null)}
                />)

            }
        }
    }

回答8:

Using the StackActions API is what broke the navigation in my app. By navigating to a screen with only the (simpler and more reliable) NavigationActions API, the back button worked.

回答9:

react-navigation

<TouchableOpacity onPress={()=>{ this.props.navigation.goback() }}>
 <Text>Back</Text>
</TouchableOpacity>

react-native-router-flux

<TouchableOpacity onPress={() => { Actions.pop() }}>
 <Text>Back</Text>
</TouchableOpacity>

来源：https://stackoverflow.com/questions/43982177/react-native-navigation-goback-doesnt-work

标签

reactjs

react-native

react-redux

react-navigation