ReactNative使用 react-navigation 详解
react-navigation是官方主推的导航组件,致力于解决导航卡顿,数据传递,Tabbar和navigator布局,支持redux
。
最新版本为3.x,大多文档介绍的是 1.x 或 2.x 的用法,本文使用3.x实现
1、主要内容
StackNavigator
顶部导航条,用来跳转页面和传递参数。
TabNavigator
底部标签栏,用来区分模块。
DrawerNavigator
抽屉,从App侧方滑出一个页面。
2、引入创建
实现目标:
首先显示登陆页面,登陆成功后显示主页,主页布局采用底部标签栏
App.js:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import { createStackNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation'; import Login from './src/Login';
import Home from './src/Home';
import User from './src/User'; const AppStack = createStackNavigator(
{
Home: {screen : Home},
User: {screen : User},
},
{
mode: 'modal',
headerMode: 'none',
}
); const RootNavigator = createSwitchNavigator(
{
AuthLoading: Login,
App: AppStack,
},
{
initialRouteName: 'AuthLoading',
}
); export default createAppContainer(RootNavigator);
ReactNative使用 react-navigation 详解的更多相关文章
- react-native 学习 ----- React Navigation
很久没有的登陆博客园了,密码都是找回的,从当年的大学生已经正常的走上了程序员的道路,看到之前发的博客还是写的android,现在自己已经在使用了react-native了. 大学毕业了,做了java后 ...
- react-native导航器 react navigation 介绍
开发环境搭建好之后,想要进一步了解react-native,可以先从react-native官网上的电影列表案例入手: https://reactnative.cn/docs/0.51/sample- ...
- Reactnative——安装React Navigation后无法运行项目
运行 npm install --save react-navigation 后,运行 react-native run-android 报 解决方法: 1.react-native init Nav ...
- react-native模拟机调试步骤详解 ——亲测有效!!!!
步骤 1 下载安装夜神模拟器,去夜神官网下载即可!然后安装完成!进入到初始化项目的目录,打开cmd命令,运行adb connect 127.0.0.1:62001 链接模拟器 2 链接完成之后,运行安 ...
- ReactNative项目结构目录详解
在使用 react-native init TestProject 在新建项目时,会看到如下目录 React Native结构目录 名称 描述 android目录 Android项目目录,包含了使用A ...
- React-Native Listview组件用法详解
ListView作为React Native的核心组件,用于高效地显示一个可以垂直滚动的变化的数据列表.其中最重要的属性之一是DataSource,列表依赖的数据源,用于实例化一个ListView对象 ...
- React-Native中props用法详解
props就是属性,是为了描述一个组件的特征而存在的.它是父组件传递给子组件的. 使用props 通过上一个页面传递 新建一个 PropsTest.js 文件 1 2 3 4 5 exprot def ...
- React.Children详解
React.Children提供了处理this.props.children的工具,this.props.children可以任何数据(组件.字符串.函数等等).React.children有5个方法 ...
- React hooks详解
此篇文章仅是对hooks入门的总结,老鸟略过吧~ React从16.8.X以后增加了一个新特性,react hooks 让我们看看这个新特性又带来了哪些惊喜呢~以下内容我们采取不同方式创建组件来进行对 ...
- vue和react全面对比(详解)
vue和react对比(详解) 放两张图镇压小妖怪 本文先讲共同之处, 再分析区别 大纲在此: 共同点: a.都使用虚拟dom b.提供了响应式和组件化的视图组件 c.注意力集中保持在核心库,而将其他 ...
随机推荐
- ISO/IEC 9899:2011 条款6.7.4——函数说明符
6.7.4 函数说明符 语法 1.function-specifier: inline _Noreturn 约束 2.函数说明符应该只能被用在对一个函数标识符的声明中. 3.对一个含有外部连接函数的内 ...
- 逐层解析请求json参数字符串【我】
import net.sf.json.JSONObject; 逐层解析请求json参数字符串: InputStream inStream =null; BufferedReader br =null; ...
- k8s记录-下载k8s相关二进制包(一)
1)软件清单操作系统:CentOS7Kubernetes版本:v1.14.2flannel:v0.10.0ectd3:v3.3.11Docker版本:v18.09.0-ceDocker-compose ...
- DDos攻击解决办法
(1).DDos概念 分布式拒绝服务攻击(英文意思是Distributed Denial of Service,简称DDoS)是指处于不同位置的多个攻击者同时向一个或数个目标发动攻击,或者一个攻击者控 ...
- 教孩子学编程 Python
教孩子学编程 Python 目录 第1 章 Python 基础:认识环境 111 认识Python 312 用Python 编写程序 513 运行Python 程序 514 本章小结 615 编程 ...
- typescript那些事儿
本篇文章介绍typescript那些. ts-loader会调用typescript去编译.ts,typescript会读取tsconfig.json配置来决定如何编译. 在tsx文件中使用样式,需要 ...
- git 操作说明
第一步:代码提交到本地仓库 第二步:更新远程服务器代码到本地,如果有冲突需要优先解决,解决冲突后执行第一步操作 第三步:推送本地代码到远程服务器,可以使用source Tree 或者工具自带的配置gi ...
- iptables拦截tcp报文syn/ack/rst/psh/fin
https://www.cnblogs.com/Qingluan/p/5137136.html https://blog.csdn.net/weixin_34216107/article/detail ...
- 用anaconda保证64位和32位的python共存
conda info # 查看当前工作平台 set CONDA_FORCE_32BIT=1 # 切换到32位 set CONDA_FORCE_32BIT=0 # 切换到64位 conda create ...
- Django 之安全篇
一.CSRF攻击 CSRF攻击概述: CSRF(Cross Site Request Forgery, 跨站域请求伪造)是一种网络的攻击方式,它在 2007 年曾被列为互联网 20 大安全隐患之一.其 ...