其他代码接上篇文章

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

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

效果图

React Native 之createDrawerNavigator和createSwitchNavigator的更多相关文章

  1. React Native 之 Text的使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  2. React Native环境配置之Windows版本搭建

    接近年底了,回想这一年都做了啥,学习了啥,然后突然发现,这一年买了不少书,看是看了,就没有完整看完的.悲催. 然后,最近项目也不是很紧了,所以抽空学习了H5.自学啃书还是很无趣的,虽然Head Fir ...

  3. 史上最全Windows版本搭建安装React Native环境配置

    史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...

  4. 【腾讯Bugly干货分享】React Native项目实战总结

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...

  5. React Native环境搭建以及几个基础控件的使用

    之前写了几篇博客,但是没有从最基础的开始写,现在想了想感觉不太合适,所以现在把基础的一些东西给补上,也算是我从零开始学习RN的经验吧! 一.环境搭建 首先声明一下,本人现在用的编辑器是SublimeT ...

  6. React Native组件介绍

    1.React Native目前已有的组件 ActivityIndicatorIOS:标准的旋转进度轮; DatePickerIOS:日期选择器: Image:图片控件: ListView:列表控件: ...

  7. React Native图片控件的使用

    首先定义组件 import { AppRegistry, StyleSheet, Text, View, Image,} from 'react-native'; 然后将render返回中的模版增加I ...

  8. react-native学习笔记--史上最详细Windows版本搭建安装React Native环境配置

    参考:http://www.lcode.org/react-native/ React native中文网:http://reactnative.cn/docs/0.23/android-setup. ...

  9. windows 7下React Native环境配置

    React Native 是 Facebook 推出的一个用 Java 语言就能同时编写 ios,android,以及后台的一项技术,它可以做到实时热更新 .FaceBook 也号称这们技术是 “Le ...

随机推荐

  1. 深入理解java:1.1. 类加载器

    从java的动态性到类加载机制   我们知道,Java是一种动态语言. 那么怎样理解这个“动态”呢? 或者说一门语言具备了什么特性,才能称之为动态语言呢? 对于java,我是这样理解的. 我们都知道J ...

  2. 一个简单的dns服务器

    options { listen-on port 53 { any; }; listen-on-v6 port 53 { any; }; directory "/srv/app/named& ...

  3. linux sed 命令 实现对文件的增删改替换查 实验

    1. 统一实验文本 # 创建包含下面内容的文件,后面的操作都会使用这个文件 [root@MongoDB ~]# cat person.txt ,mike,CEO ,jack,CTO ,yy,CFO , ...

  4. 红帽学习笔记[RHCSA] 第九课[文件归档、硬盘、分区以及自动挂载、Swap、链接]

    文件归档 tar是什么 通过tar命令可以将大型文件汇集成一个文件(归档),注意没有压缩功能. 压缩方式 gzip 通过gzip过滤文档,使用最广泛 bzip2 通常比gzip压缩小,但是不如gzip ...

  5. Kubernetes组件及网络基础

    在前面的部分了解了Pod的创建删除 ,查看信息等.那么我们怎么去管理Pod呢?我们可以通过 ReplicationController 去管理维护 Pod. Replication Controlle ...

  6. webpack4下url-loader打包图片问题

      webpack.condig.js: const path = require('path'); //导入插件 const VueLoaderPlugin = require('vue-loade ...

  7. 部署第一个servlet应用到tomcat上

    部署第一个servlet应用到tomcat上 搭建环境 eclipse的EE版本 eclipse官网 创建一个java的应用程序 1.File->new java project 导入servl ...

  8. Qfile

    打开方式: void AddStudents::write_to_file(QString src){ QFile file("stu.txt"); if (!file.open( ...

  9. Linux下查看日志用到的常用命令

    杀僵尸进程 部分程序员,肯定喜欢下面命令: ps -ef | grep java (先查java进程ID) kill -9  PID(生产环境谨慎使用) kill.killall.pkill命令的区别 ...

  10. 6-2 如何读写json数据

    通过查看help(json.dump)和help(json.dumps)帮助信息,dump是将转换格式到文件对象,而dumps转换格式到字符串. 一.Json.dumps() Json.dumps() ...