返回键反应原生android

Question

我正在尝试使用此代码

返回我的react本机应用中的上一个视图

'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 @的属性'props'   d：\阵营\高良\ node_modules \反应母语\库\ JavaScriptAppEngine \初始化\ ExceptionsMana ...：61handleError   @   d：\阵营\高良\ node_modules \反应母语\库\ JavaScriptAppEngine \初始化\ InitializeJava ...：80ErrorUtils.reportFatalError   @   d：\阵营\高良\ node_modules \反应母语\包装机\反应，打包的\ src \解析器\ polyfills \错误后卫...：28guard   @   d：\阵营\高良\ node_modules \反应母语\库\公用\ MessageQueue.js：43callFunctionReturnFlushedQueue   @   d：\阵营\高良\ node_modules \反应母语\库\公用\ MessageQueue.js：86onmessage   @ debuggerWorker.js：39

我的猜测this.props无法访问类括号，但我不知道如何克服这个问题。如果我把BackAndroid.addEventListener放在课堂里它会给我错误

  

UnExpectedToken

Answer 1

编辑：BackAndroid现已弃用。您应该使用BackHandler代替。

在您的活动中，<Grid Margin="0,20,0,0"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <Grid Grid.Column="0"> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <TextBlock Text="{x:Bind dates}" FontWeight="Bold"/> <TextBlock Grid.Row="1" Height="Auto" Text="{x:Bind titles}" Margin="0,6,0,0" TextWrapping="WrapWholeWords"/> </Grid> <SymbolIcon Symbol="Download" Margin="20,0,0,0" Grid.Column="1" Visibility="{x:Bind visibility}"/> </Grid> 并未提及您的想法。 在这种情况下，它指的是调用事件的对象。

我在本机应用程序中执行此操作的方法是在主要组件的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()。因此它在第一次渲染之后立即添加事件。它只会被触发一次，因此没有重叠的事件和类似的东西。

但是，我不会在场景中添加事件监听器。它带来了两次可能添加事件的风险。虽然我不确定两次添加该事件是否真的会改变任何事情。