Was ich Ihnen dieses Mal mitbringe, ist die Verwendung der Navigation-Komponente React-Navigation. In allgemeinen Anwendungen müssen wir über Registerkarten springen, was eine spezielle Handhabung erfordert . Als nächstes Routing gibt Ihnen dieser Artikel eine gute Analyse.
Die konkrete Situation ist: Die App ist in drei Hauptmodule unterteilt: Home, Bill und Me, entsprechend drei Registerkarten. Die aktuelle Anforderung ist Home Push HomeTwo, HomeTwo push BillTwo, BillTwo Kehren Sie zur Bill-Startseite zurück.
const Components = { HomeTwo: { screen: HomeTwo, path:'app/HomeTwo' }, HomeThree: { screen: HomeThree, path:'app/HomeThree' }, BillTwo: { screen: BillTwo, path:'app/BillTwo' }, BillThree: { screen: BillThree, path:'app/BillThree' }, } const Tabs = TabNavigator({ Home: { screen: Home, path:'app/home', navigationOptions: { tabBar: { label: '首页', icon: ({tintColor}) => (<Image source={require('./images/home.png')} style={[{tintColor: tintColor},styles.icon]}/>), }, } }, Bill: { screen: Bill, path:'app/bill', navigationOptions: { tabBar: { label: '账单', icon: ({tintColor}) => (<Image source={require('./images/bill.png')} style={[{tintColor: tintColor},styles.icon]}/>), }, } }, Me: { screen: Me, path:'app/me', navigationOptions: { tabBar: { label: '我', icon: ({tintColor}) => (<Image source={require('./images/me.png')} style={[{tintColor: tintColor},styles.icon]}/>), }, } } }, { tabBarPosition: 'bottom', swipeEnabled: false, animationEnabled: false, lazyLoad: false, backBehavior: 'none', tabBarOptions: { activeTintColor: '#ff8500', inactiveTintColor: '#999', showIcon: true, indicatorStyle: { height: 0 }, style: { backgroundColor: '#fff', }, labelStyle: { fontSize: 10, }, }, }); const Navs = StackNavigator({ Home: { screen: Tabs, path:'app/Home' }, Bill: { screen: Tabs, path:'app/Bill' }, Me: { screen: Tabs, path:'app/Me' }, ...Components }, { initialRouteName: 'Home', navigationOptions: { header: { style: { backgroundColor: '#fff' }, titleStyle: { color: 'green' } }, cardStack: { gesturesEnabled: true } }, mode: 'card', headerMode: 'screen' });
Verwenden Sie die Reset-Aktion, die mit der Reaktionsnavigation in HomeTwo einhergeht, um die Routing-Informationen zurückzusetzen:
// push BillTwo this.props.navigation.dispatch(resetAction); // 使用reset action重置路由 const resetAction = NavigationActions.reset({ index: 1, // 注意不要越界 actions: [ // 栈里的路由信息会从 Home->HomeTwo 变成了 Bill->BillTwo NavigationActions.navigate({ routeName: 'Bill'}), NavigationActions.navigate({ routeName: 'BillTwo'}) ] });
Nachdem Sie von HomeTwo zur BillTwo-Seite gewechselt haben, klicken Sie auf die Navigationsschaltfläche in der oberen linken Ecke von BillTwo, um zur Bill-Startseite
zurückzukehren Ich glaube, Sie haben es gesehen. Sie beherrschen die oben vorgestellten Methoden. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Verwandte Lektüre:
Antworten auf Fragen zur Kamelfallbenennung und JS
js-Code-Fall – Berechnung des Wochentags basierend auf dem Datum
Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Navigationskomponente React-Navigation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!