覆盖后按反应本机路由器通量

Question

我在我的反应原生应用程序中使用反应原生路由器通量。我想覆盖后退按钮按下事件，因为我想在返回之前添加确认弹出窗口。我搜索了很多，但我找到的所有链接都是为了覆盖 Android 的硬件后退按钮。我不仅想覆盖硬件后按，还想覆盖导航栏中的后退按钮按下事件（适用于 Android 和 iOS）。请帮帮我。

编辑：我找到了一种方法来覆盖后按事件，方法是在我的场景中添加两个道具back 和onBack。但现在的问题是我希望这个背压是有条件的。我将一个布尔道具 edit 传递给这个场景。如果编辑为真，那么我只想覆盖后台，否则我只想要默认的。那么如何使用传递给该场景的道具更改 Router.js 中的 Scene 参数？

sudo 代码

if(edit){
   openConfirmationDialog();
} else {
   Actions.pop();
}

Answer 1

对我来说，@Raj Suvariya 的上述解决方案有效，但前提是我向我想要自定义其“onBack”的场景（Raj 示例中的“Home”场景）添加了一个“renderBackButton”回调： 所以这被添加到场景的定义中：

renderBackButton={()=>{}}

这是在导航到页面时添加的，与上面 Raj 的回答相同：

Actions.Home({onBack: () => console.log('custom back callback') });

Answer 2

反应原生 |反应本机路由器通量 |还原 | Android 后退按钮监听器，在使用 react native 时处理 android 上的后按。

// below code works with Android + react native + react-native-router-flux
// this is final index.js file code from where control whole app navigation
import { BackHandler, ToastAndroid } from 'react-native';
import React,{Component} from 'react';
import { Router, Scene, Actions } from 'react-native-router-flux';
import { Provider } from 'react-redux';
// as per your compoenents import them accordingly
import Home from './home';
import OtherScreen from './OtherScreen';
//variable 
var backButtonPressedOnceToExit = false;

export default class App extends Component {

  componentWillMount(){
    BackHandler.addEventListener('hardwareBackPress', this.onBackPress.bind(this));
  }

  componentWillUnmount(){
    BackHandler.removeEventListener('hardwareBackPress', this.onBackPress.bind(this));
    }

  onBackPress() {
        if (backButtonPressedOnceToExit) {
            BackAndroid.exitApp();
        } else {
            if (Actions.currentScene !== 'Home') {
                Actions.pop();
                return true;
            } else {
                backButtonPressedOnceToExit = true;
                ToastAndroid.show("Press Back Button again to exit",ToastAndroid.SHORT);
                //setting timeout is optional
                setTimeout( () => { backButtonPressedOnceToExit = false }, 2000);
                return true;
            }
        }
    }

    render() {
      return(
        <Provider store={store}>
          <Router backAndroidHandler={this.onBackPress} >
            <Scene key="root" }>
              <Scene key="Home" component={Home} initial={true}  />
              <Scene key="OtherScreen" component={OtherScreen}  />
            </Scene>
          </Router>
        </Provider>
      );
    }
}

AppRegistry.registerComponent('YourAppNameAccordingToPackageJSON', () => App);

Answer 3

好的！我找到了方法。

无论我在哪里打开这个场景，我都可以像这样 Actions.Home({onBack: () => console.log('custom back callback') }); 传递 onBack 回调

这样我可以在每次打开该场景时提供动态回调。

Answer 4

也面临这个问题，但是我没有在 Raj 帖子的 props 中添加onBack，如果你有很多地方需要覆盖，添加 onBack 道具会很烦人。我所做的是覆盖 RNRF 的默认 onBackPress 函数。

//App.js

    <Router
        scenes={scenes}
        createReducer={reducerCreate}
        getSceneStyle={getSceneStyle}
        backAndroidHandler={() => {
            let cs = Actions.currentScene;
            if (cs === 'sc1' || cs === 'sc2') {

            } else {
                // default, pop back
                Actions.pop();
            }
            return true;
        }}
    />

    //component1.js, "component1" is a key in scenes registered.

    handleBackAction = () => {
        if (Actions.currentScene === "component1") {
            // do something you want and return true to intercept back event.
            return true;
        }
        return false;
    }
    componentDidMount() {
        this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackAction);
    }

    componentWillUnmount() {
        this.backHandler.remove();
    }