react-native 学习 ----- React Navigation
很久没有的登陆博客园了,密码都是找回的,从当年的大学生已经正常的走上了程序员的道路,看到之前发的博客还是写的android,现在自己已经在使用了react-native了。
大学毕业了,做了java后台台发,就再也没有写过移动端的东西了,知道rn的出现,发现这个比当年的web app phonegap好用多了就此一发不可收拾。公司app就是用的rn,我主要还是负责数据在store中的处理,框架也是公司大牛封装的,但是我心中总有一个移动端的梦想,所以我准备开始从零开始学习react-native。
这边呢我主要讲一下rn的导航器React Navigation,现在rn的版本时0.45,原来react-native的导航器已经换了地方,rn官网主推React Navigation,如何使用呢?
npm install --save react-navigation
这样就好了。里面主要有三个组件
StackNavigator
看到名字就知道他是栈一样的形式,一个页面盖一个页面,这让我想到android的activity,返回也是一层一层的返回
TabNavigator
这个就是tab,多选项标签,可以切换,组件里面自带原生的动画,自定义样式,个人感觉还是蛮强的
DrawerNavigator
这个就是抽屉,可以从屏幕边拖拽出一个抽屉,现在比较流行的样式
备注:
这边呢我就不贴代码了,一些demo代码在官方的文档上面都有,我也就不复制了,这边我正在学习的github地址在这边,这三个组件我用在了一个app里面,各个地方我也写了代码中文的哦
这里面的了内容也会经常更新,spring boot的后台接口也在准备开发中,后面会把redux框架融入进来,一些微信分享,登陆,还有一些第三方的插件我都会使用到,大家可以一起学习嘛、
git地址:
https://github.com/Radicalpro/AboutBall
喜欢的也可以follow和star那就太感谢啦~
react-native 学习 ----- React Navigation的更多相关文章
- React Native 学习-01
React Native 学习 (学习版本 0.39) 一.环境配置 二.IDE选择 webstorm 1.webstorm配置 ①.首先是可以选择使用汉化包汉化.eu68 ②.安装插件和外部库. 由 ...
- react native 学习一(环境搭配和常见错误的解决)
react native 学习一(环境搭配) 首页,按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介绍,下载安装pyt ...
- React Native 学习资料
React Native 学习资料 学习资料 网址 React Native中文网 https://reactnative.cn/
- React Native 学习(三)之 FlexBox 布局
React Native 学习(三)之 FlexBox 布局
- React Native 学习笔记--进阶(二)--动画
React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...
- 【React Native】React Native项目设计与知识点分享
闲暇之余,写了一个React Native的demo,可以作为大家的入门学习参考. GitHub:https://github.com/xujianfu/ElmApp.git GitHub:https ...
- React Native之React速学教程(下)
概述 本篇为<React Native之React速学教程>的最后一篇.本篇将带着大家一起认识ES6,学习在开发中常用的一些ES6的新特性,以及ES6与ES5的区别,解决大家在学习Reac ...
- React Native之React速学教程(中)
概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...
- React Native之React速学教程(上)
概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...
- React Native & react-native-web-player & React Native for Web
React Native & react-native-web-player & React Native for Web https://github.com/dabbott/rea ...
随机推荐
- vue组件(将页面公用的头部组件化)
呃……重新捡起前面用vue-cli快速生成的项目. 之前是做过一个多页面的改造,以及引入vux的ui组件,这次在这个项目的基础上,再来聊聊vue中的component. 别问我为啥总是写关于vue的博 ...
- C#文件下载(适用于各个浏览器)
1.cs代码 public void DownFile(string filePath ,string fileName ) { // filePath 文件路径 例如:/File/记录.xlsx / ...
- Java学习笔记——设计模式之三.装饰模式
函数应该做一件事,做好这件事,只做这一件事. --Clean Code 装饰模式,上代码: 先定义零件类: package cn.no3.decorator.template; public abst ...
- Java IO详解(一)------字节输入输出流
File 类的介绍:http://www.cnblogs.com/ysocean/p/6851878.html Java IO 流的分类介绍:http://www.cnblogs.com/ysocea ...
- webpack的多文件打包问题
1.第三方库如vue,vue-router可以利用webpack中的entry指定vendor:['vue','vue-router']来打包在一个文件中 2.将这些文件单独提取出来,在页面中使用&l ...
- 【JS中循环嵌套常见的六大经典例题+六大图形题,你知道哪几个?】
首先,了解一下循环嵌套的特点:外层循环转一次,内层循环转一圈. 在上一篇随笔中详细介绍了JS中的分支结构和循环结构,我们来简单的回顾一下For循环结构: 1.for循环有三个表达式,分别为: ①定义循 ...
- Hibernate乐观锁、悲观锁和多态
乐观锁和悲观锁 悲观锁(Pessimistic Lock), 顾名思义,就是很悲观,每次去拿数据的时候都认为别人会修改,所以每次在拿数据的时候都会上锁,这样别人想拿这个数据就会block直到它拿到锁 ...
- Intel CPU命名规则的简略解析
Intel的CPU命名规则一直不是特别清楚,而网上的很多解读是不准确,甚至是错误的,应该以官方文档为准.所以我在查阅官方资料的基础上,以一种简明扼要的方式记录下来.值得说明的是,这个解析只是简略的,一 ...
- Linux下批量管理工具PSSH
pssh命令 pssh命令是一个python编写可以在多台服务器上执行命令的工具,同时支持拷贝文件,是同类工具中很出色的,类似pdsh,个人认为相对pdsh更为简便,使用必须在各个服务器上配置好密钥认 ...
- Java虚拟机原理
1.编译机制 分析和输入到符号表: 词法分析:将代码转化为token序列 语法分析:由token序列生成抽象语法树 输入到符号表:将类中出现的符号输入到类的符号表 注解处理: 处理用户自定义注解,之后 ...