React native 在ReactNative中处理BackAndroid

我在Android react本机应用程序中有一个导航器。 我正在使用navigator.push（）导航到其他页面。“后退”按钮会弹出导航器并返回一页，这似乎很自然，但事实并非如此。在搜索了很多次后，我得到了一个针对相同问题的函数，但我认为我放置的方式不对，请查看此帮助我解决问题

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

var SCREEN_WIDTH = require('Dimensions').get('window').width;
var BaseConfig = Navigator.SceneConfigs.FloatFromRight;
componentWillMount = () => {
BackAndroid.addEventListener('hardwareBackPress', () => Actions.pop());
};
var PageOne = React.createClass({
  _handlePress() {
    this.props.navigator.push({id: 2,});
  },

  render() {
    return (
      <View style={[styles.container, {backgroundColor: 'green'}]}>
        <Text style={styles.welcome}>Greetings!</Text>
        <TouchableOpacity onPress={this._handlePress}>
          <View style={{paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black'}}>
            <Text style={styles.welcome}>Go to page two</Text>
          </View>
        </TouchableOpacity>
       </View>
    )
  },
});

var PageTwo = React.createClass({
  _handlePress() {
    this.props.navigator.pop();
  },

  render() {
    return (
      <View style={[styles.container, {backgroundColor: 'purple'}]}>
        <Text style={styles.welcome}>This is page two!</Text>
        <TouchableOpacity onPress={this._handlePress}>
          <View style={{paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black'}}>
            <Text style={styles.welcome}>Go back</Text>
          </View>
        </TouchableOpacity>
       </View>
    )
  },
});

var SampleApp = React.createClass({
  _renderScene(route, navigator) {
    if (route.id === 1) {
      return <PageOne navigator={navigator} />
    } else if (route.id === 2) {
      return <PageTwo navigator={navigator} />
    }
  },

  _configureScene(route) {
    return CustomSceneConfig;
  },

  render() {
    return (
      <Navigator
        initialRoute={{id: 1, }}
        renderScene={this._renderScene}
        configureScene={this._configureScene} />
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: 'white',
  },
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);
module.exports = SampleApp;

var React=require（'React-native'）；
变量{
评估学，
样式表，
文本，
看法
领航员，
可触摸不透明度，
}=反应；
var SCREEN_WIDTH=require（'Dimensions'）.get（'window'）.WIDTH；
var BaseConfig=Navigator.sceneconfig.FloatFromRight；
组件将装入=（）=>{
BackAndroid.addEventListener（'hardwareBackPress'，（）=>Actions.pop（））；
};
var PageOne=React.createClass({
_女佣（）{
this.props.navigator.push（{id:2，}）；
},
render（）{
返回(
问候语！
转到第二页
)
},
});
var PageTwo=React.createClass({
_女佣（）{
this.props.navigator.pop（）；
},
render（）{
返回(
这是第二页！
回去
)
},
});
var SampleApp=React.createClass({
_renderScene（路线、导航器）{
如果（route.id==1）{
返回
}else if（route.id==2）{
返回
}
},
_配置场景（路线）{
返回CustomSceneFig；
},
render（）{
返回(
);
}
});
var styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
},
欢迎:{
尺寸：20，
textAlign:'中心'，
差额：10，
颜色：'白色'，
},
});
AppRegistry.registerComponent（'SampleApp'，（）=>SampleApp）；
module.exports=SampleApp；

BackAndroid应返回true或false以正常工作

试试这个：

    componentWillMount = () => {
        BackAndroid.addEventListener('hardwareBackPress', () => 
            const lengthOfNavigator = this.props.navigator.getCurrentRoutes();
            if (lengthOfNavigator.length !== 1) {
                this.props.navigator.pop();
                return true;
            } else {
                return false;
            }
       );
   };

---

getCurrentRoutes用于获取导航器堆栈中的所有组件。

您可以在index.android.js或您的根文件中添加此代码，并将此代码包装在componentDidMount（）中。请修改我的代码，以便我更好地理解我更改的代码。复制并替换组件willmount在您的代码中。让我们来看看。这个很棒的模块允许您在JSX中声明AndroidBackButton。只要给它一个按下时运行的功能，它就会自动处理其他一切。请确保在最后一个处理程序中返回false，以便退出应用程序。