react native 如何实现后退按钮答案

【问题标题】：react native how to implement a back buttonreact native 如何实现后退按钮
【发布时间】：2016-02-12 07:28:18
【问题描述】：

我不明白如何实现后退按钮。以编程方式推送场景，当我单击按钮时，它将继续弹出屏幕，如果没有更多场景要弹出，则退出反应原生视图并返回原生视图

这是我在活动中的内容

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

在这种情况下我需要覆盖 OnBackPressed 吗？

这是我如何设置导航器

    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} />
  );

}

这里是登录的第一个场景

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;

}

}

当我单击按钮时，没有任何反应。我想要的是退出反应原生视图，因为它位于场景的顶部。

奇怪的是，我什至在单击按钮之前就看到了控制台日志。这正常吗？

【问题讨论】：

标签： javascript android react-native navigator

【解决方案1】：

首先，从 react-native 导入 BackAndroid。之后处理硬件返回按钮

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

如果你想关闭应用程序，从 onBackPress() 返回 false，否则返回 true。

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

【讨论】：

【解决方案2】：

 onPress={this.onPressButton}

到

onPress={() => this.onPressButton}

或

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

正确绑定，看看是否有效。请记住，在 es6 中，您必须正确绑定函数。 ES5 会自动完成。

【讨论】：