反应原生如何实现后退按钮

Question

I am not understanding how the implement a back button. The sceen is pushed programmatically and when I click on the button it will keep on popping the screen and if there are no more scene to pop then exit the react native view and return back to native view

Here is what I have in the activity

    @Override
public void invokeDefaultOnBackPressed() {
    getReactInstanceManager().onBackPressed();
}

Do I need to override the OnBackPressed in this case?

Here is how i setup the navigator

    render() {

    return (
        <Navigator
            initialRoute={{name: 'root'}}
            renderScene={this.renderScene.bind(this)}
            configureScene={(route) => {
                if (route.sceneConfig) {
                    return route.sceneConfig;
                }
                return Navigator.SceneConfigs.FloatFromRight;
            }} />
    );
  }
  renderScene(route, navigator) {
  return (
    <Login
      navigator={navigator} />
  );

}

And in the login here is the first scene

class Login extends Component {

constructor(props) {
    super(props);        
    _navigator = this.props.navigator
    // Private variables
    this.state = {
        isLoading: true,

    }
}


                <View style={styles.leftContainer}>
                    <TouchableHighlight style={styles.button} onPress={this.onPressButton}>
                        <Text style={[styles.buttonText]}>Invite</Text>
                    </TouchableHighlight>
                </View>

onPressButton() {
    console.log("back button");
    if (this.props.navigator && this.props.navigator.getCurrentRoutes() > 1) {
        console.log("pop");
        this.props.navigator.pop();
        //return true;
    }
    console.log("false");
    //return false;

}           

}

When I click the button nothing happens. What I want is to exit the react native view since it is at the top of the scene.

The weird thing is i see the console log printed before I even click on the button. Is this normal?

Answer 1

First of all , import BackAndroid from react-native. After that handle the hardware back button

   componentDidMount() {
    BackAndroid.addEventListener('hardwareBackPress', this.onBackPress.bind(this));
}

If You want to close app, return false from onBackPress(), otherwise return true.

onBackPress(){
    this.props.nav.pop();
    return false; 
}

Answer 2

 onPress={this.onPressButton} 

to

onPress={() => this.onPressButton}

or

onPress={this.onPressButton.bind(this)}

Bind it properly, see if that works. Remember in es6 you have to properly bind your functions. ES5 does it automatically.