React Native 之createDrawerNavigator和createSwitchNavigator

Posted 2022-09-19 liuw-flexi

其他代码接上篇文章

createDrawerNavigator 抽屉

createSwitchNavigator 模拟登录=>主界面

 

index.js

/**
 * @format
 */

import AppRegistry from ‘react-native‘;
import createAppContainer from ‘react-navigation‘;
import App from ‘./navigators/AppNavigators‘;
import name as appName from ‘./app.json‘;

AppRegistry.registerComponent(appName, () => App);

 

AppNavigators.js

import React from ‘react‘; //只要在页面中使用了基础组件 都需要导入这句话 不然会报错
import Button,Platform,ScrollView,SafeAreaView from ‘react-native‘;
import  createStackNavigator,
  createAppContainer,
  createBottomTabNavigator,
  createMaterialTopTabNavigator,
  createDrawerNavigator,
  DrawerItems,
  createSwitchNavigator,
  from ‘react-navigation‘;
import HomePage from ‘../pages/HomePage‘;
import Page1 from ‘../pages/Page1‘;
import Page2 from ‘../pages/Page2‘;
import Page3 from ‘../pages/Page3‘;
import Page4 from ‘../pages/Page4‘;
import Page5 from ‘../pages/Page5‘;
import Login from ‘../pages/Login‘;
import Ionicons from ‘react-native-vector-icons/Ionicons‘
import MaterialIcons from ‘react-native-vector-icons/MaterialIcons‘


const DrawerNav=createDrawerNavigator(
  
  Page4:
    screen:Page4,
    navigationOptions:
      drawerLabel:‘Page4‘,
      drawerIcon:(tintColor)=>(
        <MaterialIcons
          name=‘drafts‘
          size=24
          style=color:tintColor
        />
      )
    
  ,
  Page5:
    screen:Page5,
    navigationOptions:
      drawerLabel:‘Page5‘,
      drawerIcon:(tintColor)=>(
        <MaterialIcons
          name=‘move-to-inbox‘
          size=24
          style=color:tintColor
        />
      )
    
  
,

  initialRouteName:‘Page4‘,
  contentOptions:
    activeTintColor:‘#e91e63‘,
  ,
  contentComponent:(props)=>(
    <ScrollView style=backgroundColor:‘#789‘,flex:1>
      <SafeAreaView forceInset=top:‘always‘,horizontal:‘never‘>
        <DrawerItems ...props/>
      </SafeAreaView>
    </ScrollView>
  )

);

const AppTopNavigator=createMaterialTopTabNavigator(
  
  Page1:
     screen:Page1,
     navigationOptions:
       tabBarLabel: ‘All‘
     
  ,
  Page2:
     screen:Page2,
     navigationOptions:
       tabBarLabel: ‘ios‘
     
  ,
  Page3:
     screen:Page3,
     navigationOptions:
       tabBarLabel: ‘android‘
     
  ,
  Page4:
     screen:Page4,
     navigationOptions:
       tabBarLabel: ‘React-Native‘
     
  ,
,
  
  tabBarOptions:
    tabStyle:mindWidth: 50,
    upperCaseLabel:false,//是否使标签大写 默认true
    scrollEndabled:true,//是否支持选项卡滚动 默认false
    style:
      backgroundColor:‘#678‘//TabBar背景色
    ,
    indicatorStyle:
      height:2,
      backgroundColor:‘white‘
    ,//标签指示器样式
    labelStyle:
      fontSize:13,
      marginTop:6,
      marginBottom:6
    ,// 文字的样式


  

);

const AppBottomNavigator=createBottomTabNavigator(
  
    Page1:
       screen:Page1,
       navigationOptions:
         tabBarLabel: ‘最热‘,
         tabBarIcon:(tintColor,focused)=>(<Ionicons
            name=‘ios-home‘
            size=26
            style=color:tintColor
         />)
       
    ,
    Page2:
       screen:Page2,
       navigationOptions:
         tabBarLabel: ‘趋势‘,
         tabBarIcon:(tintColor,focused)=>(<Ionicons
            name=‘ios-appstore‘ // 全部小写
            size=26
            style=color:tintColor
         />)
       
    ,
    Page3:
       screen:Page3,
       navigationOptions:
         tabBarLabel: ‘收藏‘,
         tabBarIcon:(tintColor,focused)=>(<Ionicons
            name=‘ios-people‘
            size=26
            style=color:tintColor
         />)
       
    ,
    Page4:
       screen:Page4,
       navigationOptions:
         tabBarLabel: ‘我的‘,
         tabBarIcon:(tintColor,focused)=>(<Ionicons
            name=‘ios-aperture‘
            size=26
            style=color:tintColor
         />)
       
    ,
  ,
  
    tabBarOptions:
      activeTintColor: Platform.OS === ‘ios‘ ? ‘#e91e63‘ : ‘#fff‘,
    
  
);

const AppStack = createStackNavigator(
    Home: 
        screen: HomePage
    ,
    Page1: 
        screen: Page1
    ,
    Page2: 
        screen: Page2,
        navigationOptions: //在这里定义每个页面的导航属性，静态配置
            title: "This is Page2.",
        
    ,
    Page3: 
        screen: Page3,
        navigationOptions: (props) => //在这里定义每个页面的导航属性，动态配置
            const navigation = props;
            const state, setParams = navigation;
            const params = state;
            return 
                title: params.title ? params.title : ‘This is Page3‘,
                headerRight: (
                    <Button
                        title=params.mode === ‘edit‘ ? ‘保存‘ : ‘编辑‘
                        onPress=()=>setParams(mode: params.mode === ‘edit‘ ? ‘‘ : ‘edit‘)
                            
                    />
                ),
            
        
    ,

    Bottom:
      screen:AppBottomNavigator,
      navigationOptions:
        title:‘BottomNavigator‘
      
    ,

    Top:
      screen:AppTopNavigator,
      navigationOptions:
        title:‘TopNavigator‘
      
    ,

    DrawerNav:
      screen:DrawerNav,
      navigationOptions:
        title:‘This is DrawNavigator‘,

      
    
,
 
    defaultNavigationOptions: 
        // header: null,// 可以通过将header设为null 来禁用StackNavigator的Navigation Bar
    
  
);

const AuthStack = createStackNavigator(
    Login: 
        screen: Login
    ,
,
    navigationOptions: 
        // header: null,// 可以通过将header设为null 来禁用StackNavigator的Navigation Bar
    
);

const AppStackNavigator = createSwitchNavigator(
    
        Auth: AuthStack,
        App: AppStack,
    ,
    
        initialRouteName: ‘Auth‘,
    
);

const App = createAppContainer(AppStackNavigator)
export default App

View Code

 

Login.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

 import React, Fragment,Component from ‘react‘;
 import 
   StyleSheet,
   View,
   Text,
   Button,
  from ‘react-native‘;

 export default class Login extends Component 

   render()

     const navigation=this.props;
     return (
       <View style=styles.container>
         <Text style=styles.welcome>欢迎来到Login</Text>
         <Button
           title=‘Go App‘
           onPress=()=>
             navigation.navigate(‘App‘);
           
         />


       </View>
       );
   
 

 const styles=StyleSheet.create(
   container:
     flex:1,
   ,
   welcome:
     fontSize:20,
     textAlign: ‘center‘,
   

 );

View Code

 

效果图