ナビゲーションコンポーネントreact-navigationの使い方

今回紹介するのは、navigationコンポーネントのreact-navigationの使用方法です。一般的なアプリケーションでは、ルーティングの特別な処理が必要になるため、タブ間を移動する必要があります。この記事では、優れた分析を提供します。

具体的な状況は次のとおりです: アプリは 3 つの主要モジュール (Home、Bill、Me) に分割されており、3 つのタブに対応しています。現在の要件は Home プッシュです。 HomeTwo、HomeTwo プッシュ BillTwo、BillTwo Bill 請求書ホームページに戻ります。

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(&#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;
 });

HomeTwo の React-navigation に付属するリセット アクションを使用して、ルーティング情報をリセットします。

// 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'})
 ]
});

HomeTwo から BillTwo ページにプッシュした後、BillTwo の をクリックします左上隅にあるナビゲーション ボタン をクリックして、Bill ホームページに戻ります

上記の紹介を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、 の他の関連記事に注目してください。 php中国語のウェブサイトです！

関連書籍:

キャメルケースの命名とJSに関する質問への回答

JSのブール値、関係演算子、論理演算子の詳細な説明と例

jsコードケース - に基づく計算日付 曜日

以上がナビゲーションコンポーネントreact-navigationの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。