反応ネイティブ之createDrawerNavigator和createSwitchNavigator

他のコードに接続されている記事

createDrawerNavigator引き出し

シミュレーションログcreateSwitchNavigator =>主なインタフェース

index.js

/ * * 
 * @format 
 * / 

インポート{AppRegistry}から '反応ネイティブ' 。
インポート{createAppContainer}「ナビゲーションを反応させます」。
輸入アプリから」./navigators/AppNavigators' ; 
インポート{appNameのような名前}「./app.json」。

AppRegistry.registerComponent（appNameは、（） => APP）;

AppNavigators.js

インポートからの反応「REACT」; // 長いページで使用される基本的なコンポーネントがインポートされるか、エラーワードになるように 
インポート{ボタンを、プラットフォーム、ScrollView、SafeAreaView}ネイティブ反応する」から、
インポート{createStackNavigator、
  createAppContainer、
  createBottomTabNavigator 、
  createMaterialTopTabNavigator、
  createDrawerNavigator、
  DrawerItems、
  createSwitchNavigator、
 }から 'REACT-ナビゲーション' ; 
ホームページからインポート '../pages/HomePage' ; 
1ページ目からインポート '../pages/Page1' ; 
インポートページ2から ' ../pages/ PAGE2 ' ; 
ページ3からのインポート ../pages/Page3' ' ;
以下からの輸入Page4」../pages/Page4' ; 
以下からの輸入PAGE5」../pages/Page5' ; 
以下からの輸入ログイン」../pages/Login' ; 
インポートIonicons '反応ネイティブ・ベクトルアイコン/ Ionicons' 
インポートMaterialIconsから '反応ネイティブ・ベクトルアイコン/ MaterialIcons' 


DrawerNav CONST = createDrawerNavigator（
  { 
  {：Page4 
    画面：Page4、
    navigationOptions：{ 
      drawerLabel： 'Page4' 、
      drawerIcon：（{tintColor}） => （
         < MaterialIconsの
          名 = { 'ドラフト'
          サイズ = {24  }
          スタイル = {{色：tintColor}}
         />
      ）
    } 
  }、
  PAGE5：{ 
    スクリーン：PAGE5、
    navigationOptions：{ 
      drawerLabel： 'PAGE5' 、
      drawerIcon：（{tintColor}） => （
         < MaterialIconsの
          名 = { '移動ツー受信トレイ' } 
          サイズ = {24 } 
          スタイル = {{色：tintColor}}
         />
      ）
    } 
  } 
}、
{ 
  initialRouteName： 'Page4'、
  contentOptions：{ 
    activeTintColor： '＃e91e63' 、
  }、
  contentComponent：（小道具） => （
     <ScrollViewスタイル= {{backgroundColorの： '＃789'、フレックス：1}}> 
      <SafeAreaView forceInset = {{トップ： '常に'、水平： '決して'}}> 
        <DrawerItems {...}小道具/> 
      </ SafeAreaView> 
    </ ScrollView>   ）
} 
）。
CONST AppTopNavigator = createMaterialTopTabNavigator（
  { 
  ページ1：{ 
     画面：ページ1、
     navigationOptions：{ 
       tabBarLabel： [すべて] 
     } 
  }、
  ページ2：{ 
     画面：ページ2、

 
     navigationOptions：'IOSの' 
     } 
  }、
  ページ3：{ 
     スクリーン：ページ3、
     navigationOptions：{ 
       tabBarLabel： 'アンドロイド' 
     } 
  }、
  Page4：{ 
     スクリーン：Page4、
     navigationOptions：{ 
       tabBarLabelは： '反応させ、ネイティブ' 
     } 
  } 
}、
  { 
  tabBarOptions：{ 
    TabStyle：{mindWidth： 50 }、
    upperCaseLabel：偽、// trueに資本デフォルトにラベルを付けるかどうか 
    scrollEndabled：trueに、// スクロールタブのデフォルトをサポートするかどうか偽
     のスタイルを：{
      のbackgroundColor： '＃678' // TabBarの背景色
    }、
    indicatorStyle：{ 
      高さ： 2 、
      のbackgroundColor： '白' 
    }、// タグスタイルインジケータ
    labelStyle：{ 
      たfontSize： 13であり、
      marginTop： 6 、
      marginBottom： 6 
    } / / テキストスタイル


  } 
} 
）; 

CONST AppBottomNavigator = createBottomTabNavigator（
  { 
    ページ1：{ 
       画面：ページ1、
       navigationOptions：{ 
         tabBarLabel：'最热'、
         tabBarIcon：（{tintColor、集束}） =>（< Ioniconsの
            名 = { 'IOS家庭' } 
            サイズ = {26 } 
            スタイル = {{色：tintColor}}
          />）
        } 
    }、
    ページ2：{ 
       画面：ページ2、
       navigationOptions：{ 
         tabBarLabel： '趋势' 、
         tabBarIcon：（{tintColor、集束}） =>（< Ioniconsの
            名 = { 'IOS-AppStoreの'} // 全部小写 
            サイズは= {26 } 
            スタイル ={{色：tintColor}}
          />）
        } 
    }、
    ページ3：{ 
       画面：ページ3、
       navigationOptions：{ 
         tabBarLabel： '收藏' 、
         tabBarIcon：（{tintColor、集束}） =>（< Ioniconsの
            名 = {「IOS-人' } 
            サイズ = {26 } 
            スタイル = {{色：tintColor}}
          />）
        } 
    }、
    Page4：{ 
       スクリーン：Page4、
       navigationOptions：{ 
         tabBarLabel： '我的' 、
         tabBarIcon：（{tintColorは、集束}）=>（< 
        画面：ページ2、 Ionicons
            名前 = { 'IOS開口' } 
            サイズ = {26 } 
            スタイル = {{色：tintColor}}
          />）
        } 
    }、
  }、
  { 
    tabBarOptions：{ 
      activeTintColor：Platform.OS === 'IOS'？'＃1 e91e63'： '#FFF' 、
    } 
  } 
）。

CONST AppStack = createStackNavigator（{ 
    ホーム：{ 
        スクリーン：ホームページ
    }、
    ページ1：{ 
        画面：ページ1 
    }、
    ページ2：{ 
        navigationOptions：{ //各ページの定義本明細書ナビゲーション属性、静的構成 
            タイトル： "このページ2である。" 、
        } 
    }、
    ページ3：{ 
        スクリーン：ページ3、
        navigationOptions：（小道具） => { // それぞれのここで定義ナビゲーションプロパティページ、動的構成 
            CONST = {}ナビゲーション小道具; 
            {SETPARAMS有する状態、} CONST = ナビゲーション; 
            constの{}のparams = 州;
             リターン{ 
                タイトル：params.title？params.title： 'このページ3が' 、
                headerRight ：（
                     < ボタン
                        表題 = ？{params.mode === '編集' '保存'： '編集'} 
                        たonPress = {（）=> {SETPARAMS（{モード：params.mode === '編集' '？'： '編集' }）} 
                            }
                     />
                ）
            } 
        } 
    }、

    下：{ 
      スクリーン：AppBottomNavigator、
      navigationOptions：{ 
        タイトル： 'BottomNavigator' 
      } 
    }、

    トップ：{ 
      スクリーン：AppTopNavigator、
      navigationOptions：{ 
        タイトル： 'TopNavigator' 
      } 
    }、

    DrawerNav：{ 
      スクリーン：DrawerNav、 
      navigationOptions：{ 
        タイトル： 'これはDrawNavigator'で、

      } 
    } 
}、
 { 
    defaultNavigationOptions：{ 
        // ヘッダ：NULL、//ヌルヘッダStackNavigatorバーナビゲーションを無効に設定することができる
    } 
  } 
）; 

CONST AuthStack = createStackNavigator（{ 
    ログイン：{ 
        スクリーン：ログイン
    }、
}、{ 
    navigationOptions：{ 
        // ヘッダ：NULL、//ヌルヘッダStackNavigatorバーナビゲーションを無効に設定することができる
    } 
}）; 

CONST AppStackNavigator = createSwitchNavigator（
    {
        AUTH：AuthStack、
        アプリ：AppStack、
    }、
    { 
        initialRouteName： 'AUTH' 、
    }
）; 

constのアプリケーション = createAppContainer（AppStackNavigator）
輸出デフォルトのApp

コードの表示

/ * * 
 *サンプルは、ネイティブアプリを反応させる
 * https://github.com/facebook/react-native 
 * 
 * @format 
 * @flow 
 * / 

 反応させ、インポート、{フラグメント、コンポーネントは}から '反応します' 。
 インポート{ 
   スタイルシート、
   ビュー、
   テキスト、
   ボタン、
 から}「 -反応ネイティブ」。

 エクスポートデフォルトクラスログインコンポーネント{延び

   レンダリング（）{ 

     CONST {ナビゲーション} = この.props。
     リターン（
        <ビュースタイル= {} styles.container> 
         <テキストスタイル= {} styles.welcome>欢迎来到ログイン</テキスト> 
         <ボタン
           タイトル = { 'ゴーアプリ' } 
           たonPress = {（）=> { 
             navigation.navigate（ 'アプリ' ）。
           }}
          /> 


       </ビュー>        ）。
   } 
 } 
 CONSTスタイル = StyleSheet.create（{ 
   コンテナ：{ 
     フレックス： 1 、
   }、
   歓迎：{ 
     たfontSize： 20 、
     textAlign： '中央' 、
   } 
 }）。

コードの表示

レンダリング

反応ネイティブ之createDrawerNavigator和createSwitchNavigator

おすすめ