Question

我在我的本机应用程序中使用react native router flux。我想覆盖后退按钮按下事件，因为我想在返回之前添加确认弹出窗口。我搜索了很多，但我找到的所有链接都是用于覆盖Android的硬件后按钮。我不仅想要覆盖硬件背面印刷，还希望覆盖导航栏中的后退按钮事件（适用于Android和iOS）。请帮帮我。

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

sudo代码

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

Answer 1

对我来说，上面的解决方案由@Raj Suvariya工作，但前提是我添加了'renderBackButton'回调到我想要自定义'onBack'的场景（Raj的例子中的'Home'场景）：所以这被添加到场景的定义中：

renderBackButton={()=>{}}

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

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

Answer 2

好的！我找到了解决方法。

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

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

Answer 3

反应本机|反应本机路由器通量| Redux | 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帖子，如果您有很多要覆盖的地方，添加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();
    }

覆盖反压反应原生路由器通量

4 个答案: