React-native-router-flux: component only mounted once

Created on 27 Sep 2017  路  8Comments  路  Source: aksonov/react-native-router-flux

Version

Tell us which versions you are using:

  • react-native-router-flux v^4.0.0-beta.19(v3 is not supported)
  • react-native v0.47.1


tabs
lazy
showIcon
key="tabs"
showLabel={false}
tabBarPosition="bottom"
>






Expected behaviour

there four tabs ,I switch tab to tab, is there anyway to know that I will switch tab1 to tab2,and I can decide go or not to go next scence?

Actual behaviour

when I switch between tabs, I can get nothing from componentwillUpdate

Most helpful comment

Yes the component will mount once time. You can use onEnter prop to know when the tab is focused
My example everytime focus to favorite tab I do reload favorite data

class Favorite extends Component {
  static onEnter = () => {
    Actions.refresh({
      enterTime: new Date()
    })
  }

  componentWillReceiveProps (nextProps) {
    this.forceUpdate()
    if (this.props.enterTime !== nextProps.enterTime) {
      this.getFavorites()
    }
  }

All 8 comments

My experience use "lazy" props

        <Tabs
          key='home'
          tabs
          tabBarPosition='bottom'
          animationEnabled={false}
          gestureEnabled={false}
          showLabel={false}
          swipeEnabled={false}
          hideNavBar
          tabBarStyle={styles.tabBarStyle}
          navigationBarStyle={styles.navBarStyle}
          lazy
        >

@duyluonglc the lazy prop did not help,whether there has lazy ,the component only mounted once
>
tabs
lazy
showIcon
key="tabs"
showLabel={false}
tabBarPosition="bottom"
>

Yes the component will mount once time. You can use onEnter prop to know when the tab is focused
My example everytime focus to favorite tab I do reload favorite data

class Favorite extends Component {
  static onEnter = () => {
    Actions.refresh({
      enterTime: new Date()
    })
  }

  componentWillReceiveProps (nextProps) {
    this.forceUpdate()
    if (this.props.enterTime !== nextProps.enterTime) {
      this.getFavorites()
    }
  }

@duyluonglc static onEnter = () => {
} I wrote onEnter method like you, but onEnter not executed.

@duyluonglc now executed, thank you

When the tabs are "loaded" they are continuously in the navigation "state" so they only mount once and stay mounted. If you are looking for something when you enter or exit a scene, I believe there are some API methods you can attach to your tabs for this purpose.

This is a good solution if you want to reload on pop.

Does the onEnter method work in v3.43.0?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

moaxaca picture moaxaca  路  3Comments

basdvries picture basdvries  路  3Comments

xnog picture xnog  路  3Comments

vinayr picture vinayr  路  3Comments

llgoer picture llgoer  路  3Comments