React native中DrawerNavigator,StackNavigator,TabNavigator导航栏使用
import React from 'react';
import { View, Text,Button } from 'react-native';
import { DrawerNavigator,StackNavigator,TabNavigator } from 'react-navigation';
/*
* 主屏幕,可以跳转至Tab Navigator和DrawerNavigator*/
const HomeScreen = ({ navigation }) => (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
onPress={() => navigation.navigate('Details1')}
title="Go to details1"
/>
<Button
onPress={() => navigation.navigate('Details2')}
title="Go to details2"
/>
</View>
);
/*次屏幕一
* 用于承接TabNavigator
* */
const DetailsScreen1 = () => (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details1 Screen</Text>
</View>
);
/*
* 次屏幕二
* 用于承接DrawerNavigator
* */
const DetailsScreen2 = () => (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details2 Screen</Text>
</View>
);
/*
* TabNavigator主屏幕
* */
const HoScreen = () => (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Ho Screen</Text>
</View>
);
/*
* TabNavigator次屏幕
* */
const ProfileScreen = () => (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Profile Screen</Text>
</View>
);
/*TabNavigator
* */
const RootTabs = TabNavigator({
Ho: {
screen: HoScreen,
},
Profile: {
screen: ProfileScreen,
},
});
/*
* DrawerNavigator主屏幕
* */
const HScreen = ({navigation}) => (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>H Screen</Text>
<Button
onPress={() => navigation.navigate('DrawerToggle')}
title="Open Drawer"
/>
</View>
);
/*
* DrawerNaivigator
* 次屏幕
* */
const ProScreen = () => (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Pro Screen</Text>
</View>
);
/*
* DrawerNavigator
* */
const RootDrawer = DrawerNavigator({
H: {
screen: HScreen,
},
Pro: {
screen: ProScreen,
},
});
/*
*
* StackNavigator
* */
const RootNavigator = StackNavigator({
Home: {
screen: HomeScreen,
navigationOptions: {
headerTitle: 'Home',
headerRight: <Button title="Info" />,
},
},
Details1: {
screen: RootTabs,
navigationOptions: {
headerTitle: 'Details1',
},
},
Details2: {
screen: RootDrawer,
navigationOptions: {
headerTitle: 'Details2',
},
},
});
export default class App extends React.Component {
render() {
return <RootNavigator/>;
}
}
效果图
React native中DrawerNavigator,StackNavigator,TabNavigator导航栏使用的更多相关文章
- React Native(四)——顶部以及底部导航栏实现方式
效果图: 一步一步慢慢来: 其实刚入手做app的时候,就应该做出简单的顶部以及底部导航栏.无奈又在忙其他事情,导致这些现在才整理出来. 1.顶部导航栏:react-native-scrollable- ...
- React Native 的组件之底部导航栏 TabBarIOS(一)
import React,{Component}from 'react'; import { AppRegistry, StyleSheet, Text, View, TabBarIOS, } fro ...
- react native 中的ListView
ListView 的运用: 1.首先在react native中引入这个组件: 2.初始化的ListView 的相关属性: constructor(props) { super(props); con ...
- React Native 中 CSS 的使用
首先声明,此文原作者为黎 跃春 React Native中CSS 内联样式 对象样式 使用Stylesheet.Create 样式拼接 导出样式对象 下面的代码是index.ios.js中的代码: / ...
- react native中的欢迎页(解决首加载白屏)
参照网页: http://blog.csdn.net/fengyuzhengfan/article/details/52712829 首先是在原生中写一些方法,然后通过react native中js去 ...
- React Native中的网络请求fetch和简单封装
React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810 ...
- [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势
http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...
- [转] 在React Native中使用ART
http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...
- react native中使用echarts
开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...
随机推荐
- 前端JS基础知识
1. 原型 / 构造函数 / 实例 原型(prototype): 一个简单的对象,用于实现对象的 属性继承.可以简单的理解成对象的爹.在 Firefox 和 Chrome 中,每个JavaScript ...
- CentOS 7 配置nginx并默认强制使用https对http进行跳转
1.安装nginx yum install nginx 2.启动nginx服务 service nginx start 3.开启防火墙80端口,云服务器和本地虚拟服务器各有不同,不再赘述. 4.访问你 ...
- java 编译
package javacodeforstudy.testcode; public class Helloworld{ public static void main(String[] args) { ...
- ldap 导出、导入ldif数据
ldap 导出.导入ldif数据有如下方式: 1.dsadm(速度快,需要停止ldap实例) 2.dsconf(速度慢,需要保持ldap实例开启) windows导出.导入需要加上参数--unsecu ...
- javascript 判断质数
1.判断n是否为number类型,是否为整数,是否小于2: 2.若n == 2返回true: 3.从3至n的算术平方根(square)之间的奇数,如果n取余为0,则不是奇数. var isPrime ...
- python学习---装饰器
什么是装饰器 器即函数 装饰即修饰,意指为其他函数添加新功能 装饰器定义:本质就是函数,功能是为其他函数添加新功能 装饰器需要遵循的原则 1.不修改被装饰函数的源代码(开放封闭原则) 2.为被装饰函数 ...
- org.apache.commons.dbcp.DelegatingPreparedStatement.isClosed()Z和NewProxyPreparedStatement.isClosed()
原文转:https://blog.csdn.net/qq_37909508/article/details/83028536 报错: NewProxyPreparedStatement.isClose ...
- 常用类-API文档-Integer
package IntegerTest;import java.util.Base64.Decoder; public class test01 { /** * 包装类的基本数据类型 * int =& ...
- python简单爬虫 用lxml库解析数据
目标:爬取湖南大学2018年本科招生章程 url:http://admi.hnu.edu.cn/info/1026/2993.htm 页面部分图片: 使用工具: Python3.7 火狐浏览器 PyC ...
- 数据库学习二三事儿(不打代码永远get不到的东西)
针对聚合函数: 1.在自己打的过程中,发现如果select里面有一个列名有被聚合函数用到,比如: 这里的count和Sum_salary均邮局和函数,照理来说branchNo是不能搞进去的,但是它被g ...