React Native Navigator，在RenderScene中调用函数时遇到麻烦

Question

I'm using the React Native Navigator component, and I have routing set up with its renderScene method:

<Navigator
     ref="navigator"
     initialRoute={{name:'Main'}}
     renderScene={(route,navigator)=>this.renderScene(route,navigator)} />

Then, in my renderScene, I want to call an external method, toggleSideMenu, as shown below:

toggleSideMenu() {
    this.setState({
       menuDisableGestures: false
    });
}

renderScene(route, navigator) {
    switch (route.name) {
      case "SecondView":
        this.toggleSideMenu.bind()
        return <SecondView navigator={navigator} />
 ....

However, toggleSideMenu is never called. And if I change my call from this.toggleSideMenu.bind() to this.toggleSideMenu() , I get an error stating:

Cannot update during an existing state transition (such as within render ). Render methods should be a pure function of props and state.

Any ideas on how I can call an external function from within renderScene?

Answer 1

You can call a function from renderScene function without any problem. Using this.toggleSideMenu(); But what you are doing here is, you are updating the state within toggleSidemenu function.

As explained in this ,

The issue is that setState will cause a re-render (potentially, depending on shouldComponentUpdate). If you had a setState call within the render function, it would trigger yet another render. You'd likely end up in an infinite loop of re-renderings. There's nothing that stops you from using setState as a result of some asynchronous operation (in fact it's very common). It's fine just as long as it's not in the render or some other lifecycle method of a component that is run on a state update (shouldComponentUpdate being another as you'd end up with an infinite loop in the same way).

So if you remove setState from toggleSidemenu then function will execute without any problem.