ptomasroos / react-native-tab-navigator

A tab bar that switches between scenes, written in JS for cross-platform support
MIT License
2.4k stars 416 forks source link

How to hide it when push a new scene ? #104

Closed Samoy closed 6 years ago

tonych8 commented 8 years ago

I also want to know how to fix, waiting ....

XiaofanFTD commented 7 years ago

I also want to know how to fix, waiting ....

AlexisLeon commented 7 years ago

Parent screen:

_renderScene = (route, navigator) => {
    return(
      <route.component navigator={navigator} {...route.passProps} />
    );
  }

handleTabBar = (state) => {
  this.setState({
    tabBarHeight: state ? AppConfig.tabBarHeight : 0
  })
}

render () {
  <TabNavigator
    tabBarStyle={{height: this.state.tabBarHeight}}
    sceneStyle={{paddingBottom: this.state.tabBarHeight}}
    ...
  >

    <Navigator
      configureScene={ this._configureScene }
      initialRoute={{
        component: YourMainScreen,
        passProps: {
          tabBar: {
            hide: () => this.handleTabBar(false),
            show: () => this.handleTabBar(true)
          }
        }
      }}
      renderScene={this._renderScene}
      ...
    />

  </TabNavigator>
}

Your child screen:

componentWillMount () {
  this.props.tabBar.hide()
}

componentWillUnmount () {
  this.props.tabBar.show()
}
XiaofanFTD commented 7 years ago

thanks your response, and i had soved it.

At 2017-01-27 06:18:28, "Alexis Leon" notifications@github.com wrote:

Parent screen:

_renderScene = (route, navigator) => { return( <route.component navigator={navigator} {...route.passProps} /> ); }

handleTabBar = (state) => { this.setState({ tabBarHeight: state ? AppConfig.tabBarHeight : 0 }) }

render () { <TabNavigator tabBarStyle={{height: this.state.tabBarHeight}} sceneStyle={{paddingBottom: this.state.tabBarHeight}} ...

<Navigator
  configureScene={ this._configureScene }
  initialRoute={{
    component: YourMainScreen,
    passProps: {
      tabBar: {
        hide: () => this.handleTabBar(false),
        show: () => this.handleTabBar(true)
      }
    }
  }}
  renderScene={this._renderScene}
  ...
/>

}

Your child screen:

componentWillMount () { this.props.tabBar.hide() }

componentWillUnmount () { this.props.tabBar.show() }

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

byk04712 commented 7 years ago

@AlexisLeon I really think that isn't best way to hide the tabNavigator. When i navigator.push to sub component. as the same time. the The parent component who has TabNavigator will be render again.

ptomasroos commented 6 years ago

Will close since this issue is more than a year, feel free to a open a new if this is still a issue.