关于安卓端物理返回键问题



  • componentWillMount(){
    BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid);
    }
    onBackAndroid = () => {

        const {
            navigator
        } = this.props;
        if (navigator) {
            navigator.pop();
            return true;
        }
    
        return false;
    };
    

    问题是第一次进入运用返回是正常的,然后在运用中做过几次操作后,再次物理返回,就会连续返回2次(一次性退2个页面)。求助



  • @FTD-冰丰 注册的事件需要注销,否则就会一直有效。你需要在componentWillUnMount里注销事件,类似这样:

    componentWillMount(){
      this.listener = BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid);
    }
    componentWIllUnmount(){
      this.listener.remove();
    }
    

    即使这样做,也可能由于你在多个页面分别监听了这个事件导致重复执行,所以建议将这个处理放到入口组件(如App.js)里



  • @tdzl2003
    入口是不是登录页面?还是?



  • @FTD-冰丰 不是,是指你在AppRegistry里注册的组件,不是navigator中的一个页面

    例如这个



  • class ReactNativeProject extends Component {
    constructor() {
    super();
    this.state = {
    isLoading: true,
    store: true,
    };
    }

    componentWillMount(){
         BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid);
     }
    componentWillUnmount() {
    
        BackAndroid.removeEventListener('hardwareBackPress', this.onBackAndroid);
    

    }
    onBackAndroid = () => {

        const {
             navigator
        } = this.props;
        if (navigator) {
            navigator.pop();
           return true;
        }
    
        return false;
     };
    

    configureScene(route) {
    if (route.sceneConfig) {
    return route.sceneConfig;
    }
    return Navigator.SceneConfigs.FloatFromRight;
    }

    renderScene(route, navigator) {
    if (!this.router) {
    this.router = new Router(navigator);
    }
    return <route.component {...route.params} router={this.router} navigator={navigator}/>;
    }

    render() {
    const menu = <Menu {...this.props} router={this.router} />;

    return (
    
      <SideMenu menu={menu} menuPosition={'right'} touchToClose={true}>
        <StatusBar backgroundColor="blue" barStyle="light-content"/>
        <Navigator initialRoute={defaultRoute}
                 configureScene={this.configureScene}
                    renderScene={this.renderScene.bind(this)}
                            ref='navigator' />
      </SideMenu>
    
    );
    

    }
    }

    module.exports = ReactNativeProject;

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



  • @FTD-冰丰 是的,是在这里。但这个组件里不应该是通过props拿到navigator,而是refs了。



  • @tdzl2003 这么写 木有效果额

    class ReactNativeProject extends Component {
    constructor() {
    super();
    this.state = {
    isLoading: true,
    store: true,
    };
    }

    componentWillMount(){
         BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid);
     }
    componentWillUnmount() {
    
        BackAndroid.removeEventListener('hardwareBackPress', this.onBackAndroid);
    

    }
    onBackAndroid = () => {

        const {
             navigator
        } = this.props;
        if (navigator) {
            navigator.pop();
           return true;
        }
    
        return false;
     };
    

    configureScene(route) {
    if (route.sceneConfig) {
    return route.sceneConfig;
    }
    return Navigator.SceneConfigs.FloatFromRight;
    }

    renderScene(route, navigator) {
    if (!this.router) {
    this.router = new Router(navigator);
    }
    return <route.component {...route.params} router={this.router} navigator={navigator}/>;
    }

    render() {
    const menu = <Menu {...this.props} router={this.router} />;

    return (
    
      <SideMenu menu={menu} menuPosition={'right'} touchToClose={true}>
        <StatusBar backgroundColor="blue" barStyle="light-content"/>
        <Navigator initialRoute={defaultRoute}
                 configureScene={this.configureScene}
                    renderScene={this.renderScene.bind(this)}
                            ref='navigator' />
      </SideMenu>
    
    );
    

    }
    }

    module.exports = ReactNativeProject;

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



  • @tdzl2003 说:
    哈哈,好了 ,谢了,给力啊!



  • 我也遇到你所说的问题,建议把返回操作写在入口处就行了


登录后回复