React-native-router-flux: Wie verstecke ich die Navigationsleiste?

Erstellt am 10. Dez. 2015  ·  42Kommentare  ·  Quelle: aksonov/react-native-router-flux

Ich möchte die obere Navigationsleiste entfernen.
Ich habe versucht, showNavigationBar={false} auf der Route zu setzen, aber es ist immer noch da.
Übersehe ich etwas Offensichtliches?

Hilfreichster Kommentar

Das funktioniert bei mir!

Alle 42 Kommentare

Verwenden Sie es für 'Router', nicht für 'Route'. PR zur Dokumentation ist willkommen :)

Ich habe das auch versucht, entfernt die Navigationsleiste nicht :/

Lass mich das überprüfen

Sind Sie sicher, dass Sie zuerst die Root-Navbar entfernt haben?

Andernfalls ist es sichtbar, wenn Sie untergeordnete sind...

skjermbilde 2015-12-10 kl 17 05 52

Nur um sicher zu gehen, füge ich es an den meisten möglichen Stellen hinzu

Android oder iOS? Ich habe gerade die Demo modifiziert, ein Flag zu Login hinzugefügt und sehe dort normalerweise keine Navbar:
Oder möchten Sie die Navigationsleiste "Starten" ausblenden? Dann gibt 'wrapRouter' es wahrscheinlich nicht an den inneren Router weiter, ich werde es reparieren.




            <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>

Überprüfen Sie die Version 1.0.2, ich habe auch die Navigationsleiste für den Startbildschirm im Beispiel deaktiviert.

Lief wie am Schnürchen. Danke!

Das funktioniert bei mir!

  <Router hideNavBar={true} >

Funktioniert auch.

Ich habe den obigen Code von lakmalniranga ausprobiert, aber der Header nimmt immer noch einen Platz ein.
https://snag.gy/91aXTj.jpg

hideNavBar = {true}: D

arbeiten !!!! danke @lakmalniranga

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

Wir müssen hideNavBar nicht einmal den Wert true zuweisen.
Wenn wir es erwähnen, bedeutet dies einfach, dass wir ihm den Wert wahr geben, anstatt undefiniert zu sein.
Nur für zukünftige Benutzer hinzufügen, die sich auf dieses Problem beziehen.

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

irgendwelche Ideen, warum es bei der Verwendung von hideNavBar immer noch angezeigt wird?
screen shot 2017-06-09 at 1 34 44 am
screen shot 2017-06-09 at 1 33 59 am

@Omarkojak Sie haben dem Router ein paddingTop von 65 gegeben. Das bedeutet, dass jede Szene ein paddingTop von 65 erhält, unabhängig davon, ob sie Titel (Navigationsleiste) hat oder nicht.

ok behoben sorry dafür

Gibt es eine Möglichkeit, die Navigationsleiste nicht nur auszublenden, sondern auch zu entfernen? Selbst versteckt, nimmt es immer noch Platz auf dem Bildschirm ein.

es erscheint immer noch, ich kann nicht sehen warum
111
222

Gibt es hierzu Neuigkeiten? auch wenn das Navi dort noch etwas Platz braucht

@MehranJanfeshan Redest du von der v4-Version?

@aksonov Danke für die Antwort, ich habe die Version 4 bekommen,

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

Überprüfen Sie zuerst die wichtigsten Änderungen

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

@aksonov Danke für die Antwort, ich habe die Version 4 bekommen,

[react-native-router-flux] Requisiten sollten definiert werden


Sie erhalten dies, weil Sie erwähnt wurden.
Antworten Sie direkt auf diese E-Mail, zeigen Sie sie auf GitHub an oder schalten Sie den Thread stumm.

@aksonov Ich habe festgestellt, dass ich in der alten Version dies tun konnte:
<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>

Aber nachdem ich auf Version 4 umgestiegen bin, kann ich das nicht tun, also habe ich zu dieser gewechselt und es hat funktioniert:

<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>

aber das will ich nicht, ich möchte die Szene kategorisieren können, gibt es eine andere Alternative?

Ich verstehe das Problem nicht. Bitte überprüfen Sie Beispiel und versuchen Sie, Ihr Problem dort zu reproduzieren.

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

@aksonov Ich habe festgestellt, dass ich in der alten Version dies tun konnte:

Aber nachdem ich auf Version 4 umgestiegen bin, kann ich das nicht tun, also habe ich zu dieser gewechselt und es hat funktioniert:

aber das will ich nicht, ich möchte die Szene kategorisieren können, gibt es eine andere Alternative?


Sie erhalten dies, weil Sie erwähnt wurden.
Antworten Sie direkt auf diese E-Mail, zeigen Sie sie auf GitHub an oder schalten Sie den Thread stumm.

Hier ist mein Code, der in Version 3 perfekt funktioniert, aber als ich auf Version 4 aktualisiert habe, habe ich diesen Fehler erhalten:
[react-native-router-flux] props should be defined
Also habe ich den Teil entfernt, der von der blauen Linie umgeben ist, und es funktioniert gut.
image

Wickeln Sie es mit einer Root-Szene ein.

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

Hier ist mein Code, der in Version 3 perfekt funktioniert, aber als ich auf Version 4 aktualisiert habe, habe ich diesen Fehler erhalten:
[react-native-router-flux] Requisiten sollten definiert werden
Also habe ich den Teil entfernt, der von der blauen Linie umgeben ist, und es funktioniert gut.


Sie erhalten dies, weil Sie erwähnt wurden.
Antworten Sie direkt auf diese E-Mail, zeigen Sie sie auf GitHub an oder schalten Sie den Thread stumm.

Wenn ich es mit einer Root-Szene umschließe, wie kann ich dann die Zurück-Taste steuern? Ich möchte nicht, dass der Benutzer zur Anmeldeseite zurückkehren kann, deshalb habe ich Scene.

Es geht nicht um RNRF, sondern um Ihre Bewerbungsstruktur. Ich denke, Sie müssen tabs oder die Zurück-Schaltfläche deaktivieren (mit dem Attribut 'init' markieren) oder den Typ 'Ersetzen' verwenden. Überprüfen Sie Beispiel.

Tatsächlich hat v3 nur mehrere Szenen in eine zusammengefasst, sodass Sie keine Zurück-Schaltfläche sehen (weil Sie die übergeordnete Navigationsleiste ausblenden).

@aksonov Danke für die Hilfe und danke für die tolle Arbeit :)

das hat bei mir funktioniert: <Scene key="homeScreen" component={mainScreen} hideNavBar={1} />

Du könntest einfach <Scene key="homeScreen" component={mainScreen} hideNavBar /> . verwenden

@lakmalniranga das hat bei mir funktioniert, danke!

Funktioniert

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

@ahmetilhann Danke! Entfernt alle Header von untergeordneten Scenes im Router, funktioniert weiterhin ab v4.0.0-beta.3.

@ahmetilhann vielen Dank! vielleicht funktioniert der ältere Weg nur auf RN vor 4.0? Ich bin auf 4.0.6 und headerMode="none" funktioniert

Mein Projekt auf RN0.59.10 aktualisiert, jedoch immer noch mit React-native-Router-Flux für Router und Scene. Und dieses Problem mit der weißen Kopfleiste. Hat mich tagelang gekostet, die ganze Zeit vermutete ich, dass es an der React-Navigation lag, und konnte es ausschalten, aber immer noch gibt es einen anderen Header, der die Sicht blockiert, dann dachte ich nur, dass es vielleicht an React-Native-Router-Flux liegen könnte. @ahmetilhann- Methode

Das funktioniert bei mir!

auf den Punkt

Hallo,
Die Verwendung von hideNavBar lässt die Lochkomponenten verschwinden.
Hier ist mein 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>

Was könnte die Ursache sein?

Screenshot_2020-05-03 elschool

Hallo,
Die Verwendung von hideNavBar lässt die Lochkomponenten verschwinden.
Hier ist mein 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>

Was könnte die Ursache sein?

Screenshot_2020-05-03 elschool

Das gleiche Problem habe ich auch.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

VictorK1902 picture VictorK1902  ·  3Kommentare

sreejithr picture sreejithr  ·  3Kommentare

kirankalyan5 picture kirankalyan5  ·  3Kommentare

wootwoot1234 picture wootwoot1234  ·  3Kommentare

fgrs picture fgrs  ·  3Kommentare