web-dev-qa-db-fra.com

Comment masquer React Native NavigationBar

J'ai NavigatorIOS sous Navigator et je voudrais masquer la barre de navigation de Navigator pour pouvoir utiliser la barre de NavigatorIOS. Y a-t-il un moyen de faire ça?

Ceci est capture d'écran que j'ai vu. J'ai besoin de backend de NavigatorIOS ..

La structure que je veux construire est la suivante:

├── NavigatorRoute1
│   ├── NavigatorIOSRoute1
│   ├── NavigatorIOSRoute2
│   └── NavigatorIOSRoute3
└── NavigatorRoute2

Le code que j'ai est le ci-dessous. (Essentiellement obtenu à partir d’exemples UIExplore.

Navigateur

render: function(){
return (
  <Navigator
    initialRoute={ROUTE_STACK[this.getInitialRouteIndex()]}
    initialRouteStack={ROUTE_STACK}
    style={styles.container}
    renderScene={this.renderScene}
    navigationBar={
      <Navigator.NavigationBar
        routeMapper={NavigationBarRouteMapper}
        style={styles.navBar}
      />
    }
  />
);
}

NavigateurIOS

render: function(){
var nav = this.props.navigator;
 return (
  <NavigatorIOS
    style={styles.container}
    ref="nav"
    initialRoute={{
      component: UserSetting,
      rightButtonTitle: 'Done',
      title: 'My View Title',
      passProps: {nav: nav},
    }}
    tintColor="#FFFFFF"
    barTintColor="#183E63"
    titleTextColor="#FFFFFF"
  />
);

}

UPDATE avec ma solution

J'ai ajouté une fonction permettant de modifier l'état et de gérer le rendu de Navigator, puis de transmettre l'accessoire au composant afin de modifier l'état.

hideNavBar: function(){
  this.setState({hideNavBar: true});
},
render: function(){
 if ( this.state.hideNavBar === true ) {
  return (
    <Navigator
      initialRoute={ROUTE_STACK[0]}
      initialRouteStack={ROUTE_STACK}
      renderScene={this.renderScene}
    />
  );
 }else{
  return (
    <Navigator
      initialRoute={ROUTE_STACK[this.getInitialRouteIndex()]}
      initialRouteStack={ROUTE_STACK}
      style={styles.container}
      renderScene={this.renderScene}
      navigationBar={
        <Navigator.NavigationBar
          routeMapper={NavigationBarRouteMapper}
          style={styles.navBar}
        />
      }
    />
  );
}

}

et 

render: function(){
 var hideNavBar = this.props.hideNavBar;
 return (
  <NavigatorIOS
    style={styles.container}
    initialRoute={{
      component: UserSetting,
      rightButtonTitle: 'Done',
      title: 'My View Title',
      passProps: {hideNavBar: hideNavBar},
    }}
    tintColor="#FFFFFF"
    barTintColor="#183E63"
    titleTextColor="#FFFFFF"
  />
 );

}

javascriptreact-nativenavigationbar
15
shohey1226

Dans votre classe de navigateur, il semble que vous passiez dans une barre de navigation. Vous pouvez ajouter une logique à transmettre dans Navigator.NavigationBar ou dans votre barre NavigatorIOS en fonction de ce que vous souhaitez utiliser. Pour ce faire, vous devez spécifier une variable d'état dans Navigator que vous souhaitez mettre à jour lorsque vous souhaitez que la barre soit modifiée.

2
Linai

J'ai résolu ce problème en définissant une barre de navigation personnalisée pouvant inspecter l'itinéraire actuel. Ressemblerait à quelque chose comme ceci:

class NavigationBar extends Navigator.NavigationBar {
  render() {
    var routes = this.props.navState.routeStack;

    if (routes.length) {
      var route = routes[routes.length - 1];

      if (route.display === false) {
        return null;
      }
    }

    return super.render();
  }
}

En utilisant votre exemple:

render: function(){
  return (
    <Navigator
      initialRoute={{
        component: UserSetting,
        rightButtonTitle: 'Done',
        title: 'My View Title',
        display: false,
      }}
      style={styles.container}
      renderScene={this.renderScene}
      navigationBar={
        <NavigationBar
          routeMapper={NavigationBarRouteMapper}
          style={styles.navBar}
        />
      }
    />
  );
}
21
Jeff Trudeau

Parce que certaines anciennes méthodes sont obsolètes, j'ai utilisé stacknavigator. Cela fonctionne pour moi, si vous utilisez StackNavigator.

static navigationOptions = { title: 'Welcome', header: null };

N'hésitez pas à contacter, le cas échéant.

15
Naeem Ibrahim

J'ai fait ça:

Dashboard:{
  screen: Dashboard,
  navigationOptions: {
    headerStyle: {display:"none"},
    headerLeft: null
  },
},
6
Роман Карабанов

Si vous utilisez toujours NavigatorIOS, vous pouvez le faire comme ceci:

  1. modifiez le fichier NavigatorIOS.ios.js comme ci-dessous:

    before: navigationBarHidden={this.props.navigationBarHidden}
after:  navigationBarHidden={route.navigationBarHidden}

  2. navigator.Push ({navigationBarHidden: false})

5
H87kg_X

utilisez header: null pour la navigation réactive dans vos options de navigation comme suit;

navigationOptions: {
    header: null,
}
2
Isaac Sekamatte

transmettez cette propriété avec navigator.Push ou initialRoute en la définissant comme true

navigationBarHidden ?: PropTypes.bool 

Valeur booléenne indiquant si la barre de navigation est masquée par défaut.

par exemple: 

<NavigatorIOS
          style={styles.container}
          initialRoute={{
            title: 'LOGIN',
            component: Main,
            navigationBarHidden: true,
          }}/>

ou

this.props.navigator.replace({
        title: 'ProviderList',
        component: ProviderList,
        passProps: {text: "hai"},``
        navigationBarHidden: true,
  });
2
Tibin Thomas
static navigationOptions = { title: 'Welcome', header: null };
1
Shubham Goel