javascript - react native how to implement a back button - Stack Overflow

admin管理员组

文章数量:1356372

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?

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?

• javascript
• android
• react-native
• navigator

Share Improve this question Follow asked Feb 12, 2016 at 7:28 chocobochocobo 11122 silver badges66 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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

   ponentDidMount() {
    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; 
}

 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.

本文标签：