So verwenden Sie die Navigationskomponente React-Navigation-js-Tutorial-php.cn

So verwenden Sie die Navigationskomponente React-Navigation

php中世界最好的语言

Freigeben： 2017-12-30 17:59:00

Original

1803 Leute haben es durchsucht

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:&#39;app/HomeTwo&#39; },
 HomeThree: { screen: HomeThree, path:&#39;app/HomeThree&#39; },
 BillTwo: { screen: BillTwo, path:&#39;app/BillTwo&#39; },
 BillThree: { screen: BillThree, path:&#39;app/BillThree&#39; },
}
  
const Tabs = TabNavigator({
 Home: {
  screen: Home,
  path:&#39;app/home&#39;,
  navigationOptions: { 
  tabBar: {
   label: &#39;首页&#39;,
   icon: ({tintColor}) => (<Image source={require(&#39;./images/home.png&#39;)} style={[{tintColor: tintColor},styles.icon]}/>),
  },
  }
 },
 Bill: {
  screen: Bill,
  path:&#39;app/bill&#39;,
  navigationOptions: {
  tabBar: {
   label: &#39;账单&#39;,
   icon: ({tintColor}) => (<Image source={require(&#39;./images/bill.png&#39;)} style={[{tintColor: tintColor},styles.icon]}/>),
  },
  }
 },
 Me: {
  screen: Me,
  path:&#39;app/me&#39;,
  navigationOptions: {
  tabBar: {
   label: &#39;我&#39;,
   icon: ({tintColor}) => (<Image source={require(&#39;./images/me.png&#39;)} style={[{tintColor: tintColor},styles.icon]}/>),
  },
  }
 }
 }, {
 tabBarPosition: &#39;bottom&#39;, 
 swipeEnabled: false,
 animationEnabled: false, 
 lazyLoad: false, 
 backBehavior: &#39;none&#39;, 
 tabBarOptions: {
  activeTintColor: &#39;#ff8500&#39;, 
  inactiveTintColor: &#39;#999&#39;,
  showIcon: true, 
  indicatorStyle: {
  height: 0 
  },
  style: {
  backgroundColor: &#39;#fff&#39;, 
  },
  labelStyle: {
  fontSize: 10, 
  },
 },
 });
  
  
 const Navs = StackNavigator({
 Home: { screen: Tabs, path:&#39;app/Home&#39; },
 Bill: { screen: Tabs, path:&#39;app/Bill&#39; },
 Me: { screen: Tabs, path:&#39;app/Me&#39; },
 ...Components
 }, {
 initialRouteName: &#39;Home&#39;, 
 navigationOptions: { 
  header: { 
  style: {
   backgroundColor: &#39;#fff&#39;
  },
  titleStyle: {
   color: &#39;green&#39;
  }
  },
  cardStack: { 
  gesturesEnabled: true
  }
 },
 mode: &#39;card&#39;, 
 headerMode: &#39;screen&#39;
 });

Nach dem Login kopieren

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: &#39;Bill&#39;}),
 NavigationActions.navigate({ routeName: &#39;BillTwo&#39;})
 ]
});

Nach dem Login kopieren

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

Boolesche Werte, relationale Operatoren in JS, Ausführliche Erklärung und Beispiele für logische Operatoren

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!