javascript - onEnteronExit method in React Native Component (react-native-router-flux) - Stack Overflow

admin管理员组

文章数量:1397228

So I can use the onEnter/onExit method at the root of my app in the router definitions and it works perfectly fine:

<Scene key="arena" hideNavBar={true}  onEnter={() => console.log("Entered")} ponent={ArenaPage} />

Is there any way I can do this inside the ponent itself so that I can update the local state??

export default class ArenaPage extends Component {
    onEnter () {
        this.setState(...)
    }
    // Render blah blah blah...
}

If not possible, Is there anyway to trigger ponentWillUnmount when navigating away from Scene (Actions.[key])

So I can use the onEnter/onExit method at the root of my app in the router definitions and it works perfectly fine:

<Scene key="arena" hideNavBar={true}  onEnter={() => console.log("Entered")} ponent={ArenaPage} />

Is there any way I can do this inside the ponent itself so that I can update the local state??

export default class ArenaPage extends Component {
    onEnter () {
        this.setState(...)
    }
    // Render blah blah blah...
}

If not possible, Is there anyway to trigger ponentWillUnmount when navigating away from Scene (Actions.[key])

• javascript
• reactjs
• react-native
• react-native-router-flux

Share Improve this question Follow asked Nov 30, 2017 at 12:40 Nathan HorriganNathan Horrigan 81322 gold badges1111 silver badges2020 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You can use onEnter and onExit methods to get the result you want. And in turn can access this like so.

import { Actions } from 'react-native-router-flux'

class Home extends Component {
  static onEnter() {
     // homeSceneKey needs to be the same key that you use to configure the Scene
     Actions.refs.homeSceneKey.getWrappedInstance().myFunction()
  };

  myFunction = () => {
     // have access to this (props and state) here
     this.blah = "what ever you want to do"
  }
}

Hope this helps

Please check latest react-native-router-flux:beta.27, now you can define onEnter, onExit methods as your react ponent methods.

class Home extends Component {
  static onEnter() {
    console.log('On Focus Enter')
  };
  static onExit() {
    console.log('On Focus Exit')
  }
}

Simple use ponentWillUnmount, in the arenaPage ponent.

ponentWillUnmount() {
    // add your code here.
}

Because that will run when navigation away from the ponent. I am using it to remove error messages. And that works.

本文标签： javascriptonEnteronExit method in React Native Component (reactnativerouterflux)Stack Overflow