應用程序關閉，當我按下android的按鈕，同時使用反應原生

Question

我是新的反應原生。我的應用中有兩頁。當我按下後退按鈕時，我想打開前一頁，但是當我按下後退按鈕時，應用程序將關閉。可以做些什麼來解決這個問題？

我的代碼是：

'use strict'; 

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    Navigator, 
    TextInput, 
    TouchableHighlight 
} from 'react-native'; 
import ToolbarAndroid from 'ToolbarAndroid'; 
import ActionButton from 'react-native-action-button'; 
import backAndroid from 'react-native-back-android'; 
import {hardwareBackPress} from 'react-native-back-android'; 

class AwesomeProject extends Component { 
    renderScene(route, navigator) { 
    if(route.name == 'HomePage') { 
     return <HomePage navigator={navigator} {...route.passProps} /> 
    } 
    if(route.name == 'FormBuilderPage') { 
     return <FormBuilderPage navigator={navigator} {...route.passProps}  /> 
    } 
    } 

    render() { 
    return (
     <Navigator 
     style={{ flex:1 }} 
     initialRoute={{ name: 'HomePage' }} 
     renderScene={ this.renderScene } /> 
    ) 
    } 
} 
class BackButtonEvent extends React.Component{ 
    handleHardwareBackPress(){ 
    if(this.sate.isOpen()){ 
     this.handleClose(); 
     return true; 
    } 
    } 
} 
var HomePage = React.createClass({ 
    _navigate(name) { 
    this.props.navigator.push({ 
     name: 'FormBuilderPage', 
     passProps: { 
     name: name 
    } 
    }) 
    }, 
    render() {  
    return (
     <View style={styles.container}>   
     <ToolbarAndroid style = {styles.toolbar}> 
      <Text style = {styles.titleText}> Data Collector </Text> 
     </ToolbarAndroid> 
     <ActionButton 
      source = {require('./icon_container/ic_plus_circle_add_new_form.png')} 
      onPress = {this._navigate} 
      > 
     </ActionButton> 
     </View> 
    ) 
    } 
}) 

var FormBuilderPage = React.createClass({ 

    render() {  
    return (
     <View style={styles.container}> 
     <ToolbarAndroid style = {styles.toolbar}> 
      <TextInput placeholder = "Text here"/> 
     </ToolbarAndroid> 
     </View> 
    ) 
    } 
}) 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    backgroundColor: '#F5FCFF', 
    }, 
    toolbar: { 
    height: 56, 
    backgroundColor: '#3F51B5' 
    }, 
    titleText: { 
    color: '#fff', 
    } 
}); 

AppRegistry.registerComponent('AwesomeProject',() => AwesomeProject); 

Answer 1

您需要使用本地做出反應的BackAndroid API。這是我的示例項目的片段。

BackAndroid.addEventListener('hardwareBackPress',() => { 

    var flag = false; 

    if(_route.name==="newbooking"){ 
     Alert.alert(
      "Confirmation", 
      "Are you sure you want to cancel?", 
      [ 
       {text: 'No', onPress:() => console.log('OK Pressed!')}, 
       {text: 'Yes', onPress:() => {_navigator.pop();}} 
      ] 
     ); 
     return true; 
    } 
    else{ 
     flag = true; 
    } 
    if (_navigator.getCurrentRoutes().length === 1 ) { 
     return false; 
    } 
    if(flag){ 

     _navigator.pop(); 
     return true; 
    } 

}); 

你可以看到我已經實現了這個here！