Приложение приближается, когда я нажимаю кнопку «Назад» на Android при использовании React Native

Я новичок в React Native. У меня есть две страницы в моем приложении. Когда я нажимаю кнопку «Назад», я хочу открыть предыдущую страницу, но когда я нажимаю кнопку «Назад», приложение закрывается. Что можно сделать, чтобы решить эту проблему?

Мой код:

'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);

react-native react-native-android
person Satan Pandeya    schedule 12.08.2016    source источник
comment
Я думаю, вы оборачиваете свой компонент в функцию backAndroid.   -  person while1    schedule 12.08.2016
comment
Итак, где бы это было?   -  person Satan Pandeya    schedule 12.08.2016
comment
Вы используете этот facebook.github.io/react-native/ релизы/0.29/docs/ ?   -  person Ivan Chernykh    schedule 12.08.2016
comment
@Cherniv Как мне это реализовать в приведенном выше коде?   -  person Satan Pandeya    schedule 12.08.2016
comment
stackoverflow.com/a/39639286/3346628   -  person pomo    schedule 22.09.2016

Ответы (1)


arrow_upward
2
arrow_downward

Вам нужно использовать BackAndroid API React Native. Это фрагмент из моего примера проекта.

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

});

Вы можете увидеть, как я реализовал это здесь!

person Mihir    schedule 12.08.2016