隐藏和显示不同场景的 Navigator

Question

我想在 renderScene 上的路由器中，能够使用 scenes/components 的属性等来隐藏导航栏。

不幸的是，我无法修改导航栏的状态，只能重新渲染有条件的火焰。我猜这是因为它的设置方式？

export default class Root extends React.Component {

  render(){
    return (
      <Navigator
        initialRoute={Routes.SubdomainScreen}
        renderScene={Router.renderScene}
        configureScene={Router.configureScene}
        navigationBar={
          <Navigator.NavigationBar
            routeMapper={NavigationBarRouteMapper}
          />
        }
        style={styles.container}
      />
    )
  }
}

理想情况下，在我的路由器中，某些组件的导航栏设置为 false，然后我会将导航器的样式更新为 {opacity:0}。 When/where 有人能做到吗？

Answer 1

您可以使用您的路线定义并向其添加 hideNavBar 属性，然后使用状态跟踪它。

export default class Root extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      hideNavBar: false,
    };
  }

  render(){
    let navBar = null;

    if (! this.state.hideNavBar) {
      navBar = (
        <Navigator.NavigationBar
          routeMapper={NavigationBarRouteMapper}
        />
      );
    }

    return (
      <Navigator
        initialRoute={Routes.SubdomainScreen}
        renderScene={Router.renderScene}
        configureScene={Router.configureScene}
        onWillFocus={this.onNavWillFocus.bind(this)}
        navigationBar={navBar}
        style={styles.container}
      />
    )
  }
  onNavWillFocus(route) {
    if (route.hideNavBar !== undefined && this.state.hideNavBar !== route.hideNavBar) {
      this.setState({hideNavBar: route.hideNavBar});
    }
  }
}

隐藏和显示不同场景的 Navigator

Hiding and showing Navigator for different scenes

react-native