Реагировать Native 之 createDrawerNavigator 和 createSwitchNavigator

Статьи, связанные с другим кодом

createDrawerNavigator ящик

Моделирование Вход createSwitchNavigator => Основной интерфейс

 

index.js

/ * * 
 * @Format 
 * / 

импорт {AppRegistry} из 'реагирует родную' ; 
импорт {createAppContainer} от 'реагировать-навигации' ; 
импорт App из »./navigators/AppNavigators' ; 
импорт {имя , как APPNAME} от './app.json' ; 

AppRegistry.registerComponent (APPNAME, () => приложение);

 

AppNavigators.js

Реагировать от импорта Реагируйте; // пока основные компоненты , используемые на странице должны быть импортированы или будут слова об ошибке 
импорта {Кнопка, платформы, ScrollView, SafeAreaView} от «Native-ВЗАИМОДЕЙСТВУЕТ» ; 
Импорт {createStackNavigator, 
  createAppContainer, 
  createBottomTabNavigator , 
  createMaterialTopTabNavigator, 
  createDrawerNavigator, 
  DrawerItems, 
  createSwitchNavigator, 
 } из Реагируйте-навигации " ; 
Импорт из HomePage '../pages/HomePage' ; 
импорт из стр.1 '../pages/Page1' ; 
Импорт из PAGE2 ../pages/' PAGE2 ' ; 
Импорт из PAGE3 ' ../pages/Page3 ' ;
импорт Page4 из »../pages/Page4' ; 
импорт Page5 из »../pages/Page5' ; 
импорт Войти с »../pages/Login' ; 
импорт Ionicons из 'реагируют родной-вектор-иконки / Ionicons' 
импорт MaterialIcons из 'вступают в реакцию родной-вектор-иконки / MaterialIcons' 


Const DrawerNav = createDrawerNavigator ( 
  { 
  Page4: { 
    Экран: Page4, 
    navigationOptions: { 
      drawerLabel: 'Page4' , 
      drawerIcon: ({tintColor}) => (
         < MaterialIcons 
          имя = { '' проекты
          Размер = {24 }
          стиль = {{цвет: tintColor}}
         />
       ) 
    } 
  }, 
  Page5: { 
    экран: Page5, 
    navigationOptions: { 
      drawerLabel: 'Page5' , 
      drawerIcon: ({tintColor}) => (
         < MaterialIcons 
          имя = { 'двигаться к -inbox» } 
          размер = {24 } 
          стиль = {{цвет: tintColor}}
         />
       ) 
    } 
  } 
}, 
{ 
  initialRouteName: 'Page4' , 
  contentOptions: { 
    ActiveTintColor: '# e91e63' , 
  }, 
  contentComponent: (реквизит) => (
     <Scrollview стиль = {{BackgroundColor: '# 789', гибкий трубопровод: 1}}> 
      <SafeAreaView forceInset = {{сверху: 'всегда', горизонтальный : 'никогда'}}> 
        <DrawerItems {...} реквизита /> 
      </ SafeAreaView> 
    </ ScrollView>   ) 
} 
); 
Const AppTopNavigator = createMaterialTopTabNavigator ( 
  { 
  Page1: { 
     экран: Стр.1, 
     navigationOptions: { 
       tabBarLabel: 'Все' 
     } 
  }, 
  Page2: { 
     экран: Page2,

 
     navigationOptions: 'КСН' 
     } 
  }, 
  PAGE3: { 
     Экран: PAGE3, 
     navigationOptions: { 
       tabBarLabel: 'Андроид' 
     } 
  }, 
  Page4: { 
     Экран: Page4, 
     navigationOptions: { 
       tabBarLabel: 'Реагировать-Native' 
     } 
  } 
}, 
  { 
  tabBarOptions: { 
    TabStyle: {mindWidth: 50 }, 
    upperCaseLabel: ложь , // ли маркировать капитализации по умолчанию к истинному 
    scrollEndabled: истина , // поддерживать ли прокрутку вкладки по умолчанию ложного 
    стиля: {
      BackgroundColor: '# 678' //TabBar цвет фона 
    }, 
    indicatorStyle: { 
      высота: 2 , 
      BackgroundColor: 'White' 
    }, // указатель стиль тега 
    LabelStyle: { 
      FONTSIZE: 13 , 
      MarginTop: 6. , 
      MarginBottom: . 6 
    }, // стиль текста 


  } 
} 
); 

AppBottomNavigator Const = createBottomTabNavigator ( 
  { 
    Page1: { 
       экран: Стр.1, 
       navigationOptions: { 
         tabBarLabel: ,'最热' 
         tabBarIcon: ({tintColor, целенаправленный}) => (< Ionicons 
            имя = { 'КСН-дом' } 
            размер = {26 } 
            стиль = {{цвет: tintColor}}
          />)
        } 
    }, 
    Page2: { 
       экран: Page2, 
       navigationOptions: { 
         tabBarLabel: '趋势' , 
         tabBarIcon: ({tintColor, целенаправленный}) => (< Ionicons 
            имя = { 'КСН-AppStore'} // 全部小写 
            размер = {26 } 
            стиль = {{цвет: tintColor}}
         />)
        } 
    }, 
    PAGE3: { 
       экран: PAGE3, 
       navigationOptions: { 
         tabBarLabel: '收藏' , 
         tabBarIcon: ({tintColor, целенаправленный}) => (< Ionicons 
            имя = { 'КСН-люди' } 
            размер = {26 } 
            стиль = {{цвет: tintColor}}
          />)
        } 
    }, 
    Page4: { 
       экран: Page4, 
       navigationOptions: { 
         tabBarLabel: '我的' , 
         tabBarIcon: ({tintColor, целенаправленный}) Ionicons=> (< 
            Имя = { 'КСН-диафрагмы' } 
            размер = {26 } 
            стиль = {{цвет: tintColor}}
          />)
        } 
    }, 
  }, 
  { 
    tabBarOptions: { 
      activeTintColor: Platform.OS === '' ИОС ? '# e91e63': '#fff' , 
    } 
  } 
); 

Const AppStack = createStackNavigator ({ 
    Начало: { 
        экран: HomePage 
    }, 
    Стр.1: { 
        экран: Стр.1 
    }, 
    Страница2: { 
        экран: Страница2, 
        navigationOptions: { // определено в настоящем описании навигационные атрибуты каждой страницы, статической конфигурации 
            название: "Это Страница2." , 
        } 
    }, 
    Page3: { 
        Экран: PAGE3, 
        navigationOptions: (Опоры) => { // Здесь определение каждого навигационные страницы свойств, динамическая конфигурация 
            Const = {} навигация реквизит; 
            Const {государство, с setParams} = навигация; 
            Const {} в PARAMS = государство,
             возвращение { 
                название: params.title ? params.title: 'Это Page3 есть' , 
                headerRight : (
                     < Кнопка
                        название  = ? {params.mode === 'редактировать' 'сохранить': 'редактировать'} 
                        onPress = {() => {setParams ({режим: params.mode === 'редактировать' '?': 'редактировать' })} 
                            }
                     />
                 ), 
            } 
        } 
    }, 

    Внизу: { 
      экран: AppBottomNavigator, 
      navigationOptions: { 
        название: 'BottomNavigator' 
      } 
    }, 

    Вверх: { 
      экран: AppTopNavigator, 
      navigationOptions: { 
        название: 'TopNavigator' 
      } 
    }, 

    DrawerNav: { 
      экран: DrawerNav, 
      navigationOptions: { 
        название: 'Это DrawNavigator' ,

      }
    } 
}, 
 { 
    DefaultNavigationOptions: { 
        // заголовок: нуль, // нуль может быть установлен , чтобы отключить заголовок StackNavigator в навигационной панели 
    } 
  } 
); 

константные AuthStack = createStackNavigator ({ 
    Логин: { 
        Экран: Логин 
    }, 
}, { 
    navigationOptions : { 
        // заголовок: нуль, // нуль может быть установлен , чтобы отключить заголовок StackNavigator адвокатура Navigation 
    } 
}); 

Const AppStackNavigator = createSwitchNavigator ( 
    {
        Авт: AuthStack, 
        приложение: AppStack, 
    }, 
    { 
        initialRouteName: 'Авт' , 
    }
); 

Const App = createAppContainer (AppStackNavigator) 
экспорта по умолчанию приложение

Просмотр кода

 

Login.js

/ * * 
 * Образец React родное приложение 
 * https://github.com/facebook/react-native 
 * 
 * @format 
 * @flow 
 * / 

 импорта React, {Фрагмент, компонент} от 'реагируют' ; 
 импорт { 
   StyleSheet, 
   вид, 
   текст, 
   кнопки, 
 } от «реагирует родную» ; 

 экспорта по умолчанию класс Войти расширяет компонент { 

   визуализации () { 

     сопз {Навигационная} = это .props;
     вернуться (
        <Посмотреть стиль = {styles.container}> 
         <Стиль текста = {styles.welcome}>欢迎来到Войти </ Text> 
         <Кнопка 
           название = { 'Go App' } 
           onPress = {() => { 
             navigation.navigate ( 'приложение' ); 
           }}
          /> 


       </ View>        ); 
   } 
 } 
 Константные стили = StyleSheet.create ({ 
   контейнер: { 
     прогибается: 1 , 
   }, 
   принимают: { 
     FontSize: 20 , 
     TextAlign: 'центр' , 
   } 
 });

Просмотр кода

 

Renderings