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

Question

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

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

sudo 代码

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

Answer 1

好的！我找到方法了。

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

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

Answer 2

对我来说，@Raj Suvariya 的上述解决方案有效，但前提是我向 'onBack' 我想自定义的场景添加 'renderBackButton' 回调（'Home' 场景拉吉的例子）：所以这被添加到场景的定义中：

renderBackButton={()=>{}}

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

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

Answer 3

React Native |反应本机路由器通量 |终极版 | 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 4

也面临这个问题，但我没有在道具中添加onBack作为Raj post，如果你有很多地方需要覆盖，添加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();
    }

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

Override back press react native router flux

javascript

onbackpressed

react-native

react-native-router-flux