кнопку Назад реагировать родной андроид

Question

Я пытаюсь вернуться к предыдущему виду в моем реагировать родное приложение, используя этот код

'use strict'; 

var React = require('react-native'); 
var { 
    AppRegistry, 
    Component, 
    StyleSheet, 
    Text, 
    View, 
    BackAndroid, 
    Navigator 
} = React; 

var HomePage   = require('./HomePage'); 

class DetailsPage extends Component{ 
    constructor(props){ 
    super(props); 
    } 

    render(){ 
    return(
     <View style={styles.container}> 
     <Text style={styles.text}> 
      {this.props.description} 
     </Text> 
     </View> 
) 
    } 
} 
BackAndroid.addEventListener('hardwareBackPress', function() { 
    this.props.navigator.pop(); // line 32 
    return true; 
}); 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1 
    }, 
    text:{ 
    color:'#000', 
    textAlign:'center', 
    fontWeight:'bold', 
    flex:1, 
    fontSize:20 
    }, 
}); 
module.exports = DetailsPage; 

При отладке я вижу, что задняя событие успешно обнаружен, но он выходит из строя на этой линии this.props.navigator.pop() давая мне эту ошибку.

Не удается прочитать свойство 'реквизита' из undefinedhandleException @ D: \ Реагировать \ Kora \ node_modules \ реагировать родной \ Библиотеки \ JavaScriptAppEngine \ Initialization \ ExceptionsMana ...: 61handleError @ D: \ Реагировать \ Kora \ node_modules \ react-native \ Libraries \ JavaScriptAppEngine \ Инициализация \ InitializeJava ...: 80ErrorUtils.reportFatalError @ D: \ React \ Kora \ node_modules \ react-native \ packager \ react-packager \ src \ Resolver \ polyfills \ error-guard. ... : 28guard @ D: \ React \ Kora \ node_modules \ react-native \ Libraries \ Utilities \ MessageQueue.js: 43callFunctionReturnFlushedQueue @ D: \ Реагировать \ Kora \ node_modules \ реагировать родной \ Библиотеки \ Utilities \ MessageQueue.js: 86onmessage @ debuggerWorker.js: 39

мое предположение, что это this.props не могут быть доступны вне класса скобки, но я не знаю, как преодолеть эту проблему. если я ставлю BackAndroid.addEventListener внутри класса он дает мне ошибку

UnExpectedToken

Answer 1

редактирования: BackAndroid теперь осуждается. Вероятно, вы должны использовать BackHandler.

В вашем случае this не относится к тому, что вы думаете о нем. В этом случае это относится к объекту, на котором вызывается событие.

Способ, которым я это сделал в своем приложении, основанном на реакции, был добавлен в функцию componentDidMount() -функция моего основного компонента (компонента, в котором отображается Navigator).

Я добавил его там (вроде) следующим образом:

class ViewComponent extends Component { 

    ... 

    componentDidMount() { 
     //the '.bind(this)' makes sure 'this' refers to 'ViewComponent' 
     BackAndroid.addEventListener('hardwareBackPress', function() { 
      this.props.navigator.pop(); 
      return true; 
     }.bind(this)); 
    } 

    ... 
} 

Он должен работать, как это в вашем проекте.

componentDidMount() уволен сразу после первоначального рендера. Возможно, вы также можете использовать componentWillMount(). Поэтому он добавляет событие сразу после первого раза. Это срабатывает только один раз, поэтому нет совпадающих событий и подобных вещей.

Я бы, однако, не добавил слушателя событий в сценах. Это приносит риск, возможно, добавить событие дважды. Хотя я не уверен, что добавление этого события дважды фактически изменит что-либо.