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!
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
@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.
Hilfreichster Kommentar
@ddolheguy Danke für
Es hat endlich funktioniert, hinzuzufügen:
renderBackButton={()=>(null)}
Ich schließe das Thema jetzt