React-native-router-flux: Comment masquer la barre de navigation ?

Créé le 10 déc. 2015  ·  42Commentaires  ·  Source: aksonov/react-native-router-flux

Je souhaite supprimer la barre de navigation supérieure.
J'ai essayé de définir showNavigationBar={false} sur l'itinéraire, mais il est toujours là.
Est-ce que j'ai raté quelque chose d'évident ?

Commentaire le plus utile

Cela fonctionne pour moi!

Tous les 42 commentaires

Utilisez-le pour 'Router', pas pour 'Route'. PR pour la documentation est la bienvenue :)

J'ai essayé aussi, ne supprime pas la barre de navigation :/

Laisse moi vérifier

Êtes-vous sûr d'avoir d'abord supprimé la barre de navigation racine ?

Sinon il sera visible si vous cachez des enfants...

skjermbilde 2015-12-10 kl 17 05 52

Juste pour être sûr, je l'ajoute dans la plupart des endroits possibles

Android ou iOS ? Je viens de modifier la démo, d'ajouter un indicateur à la connexion et je n'y vois pas normalement la barre de navigation :
Ou vous voulez masquer la barre de navigation « Lancer » ? Alors probablement 'wrapRouter' ne le transmet pas au routeur interne, je vais le réparer.




            <Route name="launch" component={Launch} initial={true} wrapRouter={true} title="Launch"/>
            <Route name="register" component={Register} title="Register"/>
            <Route name="home" component={Home} title="Replace" type="replace"/>
            <Route name="login" schema="modal">
                <Router showNavigationBar={false}>
                    <Route name="loginModal" component={Login} title="Login" schema="modal"/>
                    <Route name="loginModal2" component={Login2} title="Login2"/>
                </Router>
            </Route>
            <Route name="register2" component={Register} title="Register2"  schema="withoutAnimation"/>
            <Route name="tabbar">
                <Router footer={TabBar} showNavigationBar={false}>
                    <Route name="tab1" schema="tab" title="Tab #1" >
                        <Router>
                            <Route name="tab1_1" component={TabView} title="Tab #1_1" />
                            <Route name="tab1_2" component={TabView} title="Tab #1_2" />
                        </Router>
                    </Route>
                    <Route name="tab2" schema="tab" title="Tab #2" component={TabView} />
                    <Route name="tab3" schema="tab" title="Tab #3" component={TabView} />
                    <Route name="tab4" schema="tab" title="Tab #4" component={TabView} />
                    <Route name="tab5" schema="tab" title="Tab #5" component={TabView} />
                </Router>
            </Route>
        </Router>

Vérifiez la version 1.0.2, j'ai également désactivé la barre de navigation pour l'écran de "lancement" dans l'exemple.

A fonctionné comme un charme. Merci!

Cela fonctionne pour moi!

  <Router hideNavBar={true} >

Fonctionne aussi.

J'ai essayé le code ci-dessus de lakmalniranga, mais l'en-tête prend toujours une place.
https://snag.gy/91aXTj.jpg

hideNavBar = {true} : D

travail !!!! merci @lakmalniranga

<Scene key="SplashSCreen" component={SplashSCreen}  title="splash" hideNavBar={true} initial/>

Nous n'avons même pas besoin d'affecter à hideNavBar la valeur true.
Si nous le mentionnons, cela signifie simplement que nous lui donnons une valeur de vrai plutôt que d'être indéfini.
Ajout juste pour les futurs utilisateurs se référant à ce problème.

<Scene 
key="SplashSCreen" 
component={SplashSCreen}  
title="splash" 
hideNavBar
 initial
/>

des idées pourquoi lors de l'utilisation de hideNavBar, il apparaît toujours
screen shot 2017-06-09 at 1 34 44 am
screen shot 2017-06-09 at 1 33 59 am

@Omarkojak Vous avez donné au routeur un paddingTop de 65. Cela signifie que chaque scène obtient un paddingTop de 65, qu'elles aient des titres (barre de navigation) ou non.

ok corrigé désolé pour ça

Existe-t-il un moyen non seulement de masquer la barre de navigation, mais également de la supprimer ? Même caché, il prend encore de la place à l'écran.

il apparaît toujours, je ne vois pas pourquoi
111
222

Une mise à jour pour ceci? même si cacher le nav prend encore de la place là-bas

@MehranJanfeshan Parlez -vous de la version v4 ?

@aksonov Merci pour la réponse, j'ai la version 4 mais

[react-native-router-flux] props should be defined

Vérifiez d'abord les changements de rupture

13 июля 2017 г., 18:22, MehranJanfeshan [email protected] написал(а):

@aksonov Merci pour la réponse, j'ai la version 4 mais

Les accessoires [react-native-router-flux] doivent être définis

-
Vous recevez ceci parce que vous avez été mentionné.
Répondez directement à cet e-mail, affichez-le sur GitHub ou coupez le fil de discussion.

@aksonov J'ai trouvé que dans l'ancienne version j'étais capable de faire ceci :
<Router sceneStyle={{margin:0}} hideNavBar={true}> <Scene key="auth"> <Scene key="login" component={AuthScreen}/> </Scene> <Scene key="main"> <Scene onRight={() => Actions.auth()} rightTitle="Log out" key="newOrderList" component={EmployeeList} title="New Orders" initial /> <Scene key="orderDetails" component={OrderDetails} title="Order Details"/> </Scene> </Router>

mais après être passé à la version 4, je ne peux plus le faire, alors j'ai changé pour ceci et cela a fonctionné :

<Router sceneStyle={{margin:0}} hideNavBar={true}> <Scene key="auth"> <Scene key="login" component={AuthScreen}/> <Scene onRight={() => Actions.auth()} rightTitle="Log out" key="newOrderList" component={EmployeeList} title="New Orders" initial /> <Scene key="orderDetails" component={OrderDetails} title="Order Details"/> </Scene> </Router>

mais ce n'est pas ce que je veux, je veux pouvoir catégoriser la scène, y a-t-il une autre alternative ?

Je ne comprends pas le problème. Veuillez vérifier l'exemple et essayer de reproduire votre problème ici.

13 июля 2017 г., в 18:45, MehranJanfeshan [email protected] написал(а):

@aksonov J'ai trouvé que dans l'ancienne version j'étais capable de faire ceci :

mais après être passé à la version 4, je ne peux plus le faire, alors j'ai changé pour ceci et cela a fonctionné :

mais ce n'est pas ce que je veux, je veux pouvoir catégoriser la scène, y a-t-il une autre alternative ?

-
Vous recevez ceci parce que vous avez été mentionné.
Répondez directement à cet e-mail, affichez-le sur GitHub ou coupez le fil de discussion.

voici mon code qui fonctionne parfaitement en version 3 mais lorsque je suis passé à la version 4 j'ai eu cette erreur :
[react-native-router-flux] props should be defined
j'ai donc enlevé la partie qui est entourée par la ligne bleue et ça marche bien.
image

Enveloppez-le avec une scène racine.

13 июля 2017 г., в 18:55, MehranJanfeshan [email protected] написал(а):

voici mon code qui fonctionne parfaitement en version 3 mais lorsque je suis passé à la version 4 j'ai eu cette erreur :
Les accessoires [react-native-router-flux] doivent être définis
j'ai donc enlevé la partie qui est entourée par la ligne bleue et ça marche bien.

-
Vous recevez ceci parce que vous avez été mentionné.
Répondez directement à cet e-mail, affichez-le sur GitHub ou coupez le fil de discussion.

si je l'enveloppe avec une scène racine, comment puis-je contrôler le bouton de retour ? Je ne veux pas que l'utilisateur puisse revenir à la page de connexion, c'est pourquoi j'ai utilisé Scene.

Il ne s'agit pas de RNRF mais plutôt de votre structure d'application. Je suppose que vous devez utiliser tabs ou désactiver le bouton de retour (marquez-le avec l'attribut 'init') ou utiliser le type 'replace'. Vérifiez l'exemple.

En fait, la v3 vient de regrouper plusieurs scènes en une seule, vous ne verrez donc aucun bouton de retour (car vous masquez la barre de navigation parente)

@aksonov Merci pour l'aide et merci pour l'excellent travail :)

cela a fonctionné pour moi : <Scene key="homeScreen" component={mainScreen} hideNavBar={1} />

Vous pouvez simplement utiliser <Scene key="homeScreen" component={mainScreen} hideNavBar />

@lakmalniranga cela a fonctionné pour moi, merci !

Travaux

const RouterComponent = () => (
    <Router headerMode="none">
        <Stack key="main">
            <Scene 
                key="login" 
                component={Login} 
            />
        </Stack>
    </Router>
);

@ahmetilhann Merci ! Supprime tous les en-têtes des scènes enfants dans le routeur, fonctionne toujours à partir de la version 4.0.0-beta.3.

@ahmetilhann merci beaucoup ! peut-être que l'ancienne méthode ne fonctionne que sur les versions antérieures à 4.0 RN ? Je suis sur 4.0.6 et headerMode="none" fonctionne

Mise à niveau de mon projet vers RN0.59.10, mais en utilisant toujours react-native-router-flux pour le routeur et la scène. Et avoir ce problème de barre d'en-tête blanche. Cela m'a pris des jours, pendant tout ce temps, je soupçonnais que c'était dû à la navigation réactive et j'ai réussi à l'éteindre, mais il y a toujours un autre en-tête bloquant la vue, alors seulement j'ai pensé que cela pouvait être dû à react-native-router-flux. La méthode

Cela fonctionne pour moi!

jusqu'au point

Bonjour,
l'utilisation de hideNavBar fait disparaître les composants du trou.
Voici mon code :

<Router>
                <Stack key="root" >
                    <Scene key="login" component={Login} title="Login" initial={true} hideNavBar={true}/>
                    <Scene key="signup" component={Signup} title="Signup" />
                </Stack>
</Router>

Quelle pourrait-être la cause?

Screenshot_2020-05-03 elschool

Bonjour,
l'utilisation de hideNavBar fait disparaître les composants du trou.
Voici mon code :

<Router>
                <Stack key="root" >
                    <Scene key="login" component={Login} title="Login" initial={true} hideNavBar={true}/>
                    <Scene key="signup" component={Signup} title="Signup" />
                </Stack>
</Router>

Quelle pourrait-être la cause?

Screenshot_2020-05-03 elschool

J'ai également le même problème.

Cette page vous a été utile?
0 / 5 - 0 notes