React-native-router-flux: Zurück-Button aus der Navigationsleiste entfernen

Erstellt am 30. Dez. 2016  ·  17Kommentare  ·  Quelle: aksonov/react-native-router-flux

Ich habe viel versucht, um den linken Pfeil in der Navigationsleiste meiner App zu entfernen. Ich habe eine Szene mit Tabs, also benötige ich sie nicht.
Screenshot hier

Das ist mein eigentlicher Code:

const scenes = Actions.create(
    <Scene key="root">
        <Scene key="login" component={LoginComponent} title="Login" initial={true} hideNavBar={true}/>
        <Scene key="tabbar" tabs={true}>
            <Scene key="feed" component={FeedComponent} title="Live orders" icon={TabIcon} initial={true}/>
            <Scene key="orders" component={OrdersComponent} title="My orders" icon={TabIcon} />
            <Scene key="wallet" component={WalletComponent} title="Wallet" icon={TabIcon} />
            <Scene key="profile" component={ProfileComponent} title="Profile" icon={TabIcon} />
        </Scene>
    </Scene>
);

export default class App extends Component {
    render() {
        return (
            <Provider store={store}>
                <RouterWithRedux scenes={scenes} />
            </Provider>
        );
    }
}

Jede Hilfe wird wirklich geschätzt!
Danke!

Hilfreichster Kommentar

@ddolheguy Danke für
Es hat endlich funktioniert, hinzuzufügen:
renderBackButton={()=>(null)}

Ich schließe das Thema jetzt

Alle 17 Kommentare

Sie müssen den "renderBackButton" in der Szene mit einer Funktion überschreiben, die den Zurück-Button zurückgibt. HINWEIS: Abhängig von Ihrer Situation müssen Sie möglicherweise den "renderLeftButton" anstelle des Zurück-Buttons mit der gleichen Funktion überschreiben.

const renderBackButton = () => {
    return (
        <TouchableOpacity
            onPress={() => {}}>
            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                <Image
                    source={require('../assets/images/icons/[email protected]')}
                    resizeMode={'contain'}/>
                <Text>Back</Text>
            </View>
        </TouchableOpacity>
    );
};

                <Scene
                    key="editExpense"
                    renderBackButton={() => renderBackButton()}
                    component={EditExpenses} title="My View" />

@ddolheguy Danke für
Es hat endlich funktioniert, hinzuzufügen:
renderBackButton={()=>(null)}

Ich schließe das Thema jetzt

@ddolheguy Danke. Bei mir hat es funktioniert.

Funktioniert nicht

@jobiwankanobi könntest du mehr Kontext geben? Dieses Problem ist mehr als 8 Monate alt - wahrscheinlich hat es sich in der Version, die Sie versuchen, geändert.

Macht nichts - ich hatte Probleme, den linken Zurück-Pfeil nicht anzuzeigen. Ich habe herausgefunden, dass die Funktionalität so funktioniert, wie ich es wollte, wenn ich hideNavBar für die Root-Komponente verwendet habe.

Hallo

Ich versuche dies zu tun, aber der Zurück-Button wird leider immer noch angezeigt.
4.0.0-beta.24

<Router> <Scene key="root"> <Scene key="login" component={LoginForm} title="Please Log in" /> <Scene key="employeeList" component={EmployeeList} title="Employees" renderBackButton={()=>(null)} renderLeftButton={()=>(null)} /> </Scene> </Router>

@krean93 Versuchen Sie, Ihrer Root-Szene tabs hinzuzufügen, und vergessen Sie nicht hideTabBar .

<Router>
  <Scene key="root" tabs>
    <Scene key="login" component={LoginForm} title="Please Log in" hideTabBar />
    <Scene key="employeeList" component={EmployeeList} title="Employees" hideTabBar />
  </Scene>
</Router>

Später können Sie Ihre Szenen verschachteln, sodass EmployeeList auf den Bildschirm eines einzelnen Mitarbeiters führen kann:

<Router>
  <Scene key="root" tabs>
    <Scene key="login" component={LoginForm} title="Please Log in" hideTabBar />
    <Scene key="employees">
      <Scene key="employeeList" component={EmployeeList} title="Employees" hideTabBar />
      <Scene key="employee" component={Employee} hideTabBar />
    </Scene>
  </Scene>
</Router>

Das hat bei mir mit 4.0.0-beta.24 funktioniert: https://github.com/aksonov/react-native-router-flux/issues/2006#issuecomment -322423598

@pistonsky Danke!!!
Denken Sie nur daran, dass Sie, wenn Sie den Aktionsaufruf von Reactive-native-router-flux verwenden, ihn an die Mitarbeiter aufrufen müssen.
Das hat einwandfrei funktioniert :)

Um den Zurück-Button in meiner Anfangsszene auszublenden, habe ich einfach die 'renderLeftButton'-Requisite hinzugefügt und eine leere Ansicht übergeben.

Unten finden Sie einige unvollständige Beispielcodes.

import { View } from "react-native";
....
...
<Scene initial={true} renderLeftButton={<View></View>}   key="timeline" component={Timeline}   />

Für diejenigen, die die Textbeschriftung der Zurück-Schaltfläche ausblenden möchten , siehe https://github.com/aksonov/react-native-router-flux/issues/2219
Das Setzen von backTitle=" " prop (Leerzeichen in _quotes_; NICHT leerer String) erledigt die Aufgabe

capture

@ddolheguy Danke für
Es hat endlich funktioniert, hinzuzufügen:
renderBackButton={()=>(null)}

Ich schließe das Thema jetzt

und wie kann ich das Zurückwischen deaktivieren?

@pistonsky

Sie müssen den "renderBackButton" in der Szene mit einer Funktion überschreiben, die den Zurück-Button zurückgibt. HINWEIS: Abhängig von Ihrer Situation müssen Sie möglicherweise den "renderLeftButton" anstelle des Zurück-Buttons mit der gleichen Funktion überschreiben.

Danke für diese Information. Die Verwendung von renderLeftButton hat bei mir funktioniert. Sie fragen sich nur, was der Unterschied zwischen renderLeftButton und renderBackButton ist? Ich habe renderBackButton (mit {() => null} ausprobiert und festgestellt, dass nur der Text der Zurück-Schaltfläche entfernt wurde, nicht jedoch das Symbol.

left={() => null} funktioniert

Jemand hat es gesagt, aber noch einmal. hideNavBar ist das, was Sie wollen, wenn Sie keine Top-Navigation wünschen. renderBackButton={()=>null} und hideTabBar funktionieren nicht, verwenden Sie hideNavBar.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen