React Native 之createDrawerNavigator和createSwitchNavigator

Articles connected to other code

createDrawerNavigator drawer

Simulation Log createSwitchNavigator => main interface

 

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

React from Import 'REACT'; // long as the basic components used in the page are to be imported or will be error words 
Import {the Button, Platform, the ScrollView, SafeAreaView} from 'Native-REACT' ; 
Import {createStackNavigator, 
  createAppContainer, 
  createBottomTabNavigator , 
  createMaterialTopTabNavigator, 
  createDrawerNavigator, 
  DrawerItems, 
  createSwitchNavigator, 
 } from 'REACT-Navigation' ; 
Import from the HomePage '../pages/HomePage' ; 
Import from the Page1 '../pages/Page1' ; 
Import from Page2 '../pages/ PAGE2 ' ; 
Import from Page3 ' ../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:{
     navigationOptions:{ 
       Tabs label:


     screen:Page2, 'the iOS' 
     } 
  }, 
  Page3: { 
     Screen: Page3, 
     navigationOptions: { 
       tabBarLabel: 'the Android' 
     } 
  }, 
  Page4: { 
     Screen: Page4, 
     navigationOptions: { 
       tabBarLabel: 'React-Native' 
     } 
  }, 
}, 
  { 
  tabBarOptions: { 
    TabStyle: {mindWidth: 50 }, 
    upperCaseLabel: false , // whether to label capitalization default to true 
    scrollEndabled: to true , // whether to support scrolling tab default false 
    style: {
      the backgroundColor: '# 678' //TabBar background color 
    }, 
    indicatorStyle: { 
      height: 2 , 
      the backgroundColor: 'White' 
    }, // tag style indicator 
    labelStyle: { 
      the fontSize: 13 is , 
      marginTop: . 6 , 
      marginBottom: . 6 
    }, // text style 


  } 
} 
); 

AppBottomNavigator const = createBottomTabNavigator ( 
  { 
    the Page1: { 
       Screen: the Page1, 
       navigationOptions: { 
         tabBarLabel: 'hottest' ,
         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: { // defined herein navigation attributes of each page, static configuration 
            title: "This IS Page2." , 
        } 
    }, 
    Page3: { 
        Screen: Page3, 
        navigationOptions: (The props) => { // Here definition of each navigation property pages, the dynamic configuration 
            const = {} navigation the props; 
            const {State, with setParams} = navigation; 
            const {} the params = State;
             return { 
                title: params.title params.title: 'This Page3 iS'? , 
                headerRight : (
                     < the Button 
                        title = ? {params.mode === 'edit' 'save': '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 DrawNavigator IS' , 

      }
    } 
}, 
 { 
    DefaultNavigationOptions: { 
         createSwitchNavigator ( 
    {// header: null, // null can be set to disable header StackNavigator the Bar Navigation 
    } 
  } 
); 

const AuthStack = createStackNavigator ({ 
    the Login: { 
        Screen: the Login 
    }, 
}, { 
    navigationOptions : { 
        // header: null, // null can be set to disable header StackNavigator the Bar Navigation 
    } 
}); 

const AppStackNavigator = 
        the Auth: AuthStack, 
        the App: AppStack, 
    }, 
    { 
        initialRouteName: 'the 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

 

Renderings