很久没有的登陆博客园了,密码都是找回的,从当年的大学生已经正常的走上了程序员的道路,看到之前发的博客还是写的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的更多相关文章

  1. React Native 学习-01

    React Native 学习 (学习版本 0.39) 一.环境配置 二.IDE选择 webstorm 1.webstorm配置 ①.首先是可以选择使用汉化包汉化.eu68 ②.安装插件和外部库. 由 ...

  2. react native 学习一(环境搭配和常见错误的解决)

    react native 学习一(环境搭配) 首页,按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介绍,下载安装pyt ...

  3. React Native 学习资料

    React Native 学习资料 学习资料 网址 React Native中文网 https://reactnative.cn/

  4. React Native 学习(三)之 FlexBox 布局

    React Native 学习(三)之 FlexBox 布局

  5. React Native 学习笔记--进阶(二)--动画

    React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...

  6. 【React Native】React Native项目设计与知识点分享

    闲暇之余,写了一个React Native的demo,可以作为大家的入门学习参考. GitHub:https://github.com/xujianfu/ElmApp.git GitHub:https ...

  7. React Native之React速学教程(下)

    概述 本篇为<React Native之React速学教程>的最后一篇.本篇将带着大家一起认识ES6,学习在开发中常用的一些ES6的新特性,以及ES6与ES5的区别,解决大家在学习Reac ...

  8. React Native之React速学教程(中)

    概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...

  9. React Native之React速学教程(上)

    概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...

  10. 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 ...

随机推荐

  1. css定位 浮动 伪类 margin

    一,margin .标准文档流,margin在竖直方向的不叠加,以较大的为准 .使用margin: auto;的盒子必须有明确的width,并且只有标准文档流的盒子 才能使用margin: auto; ...

  2. 做自己的PHP语法解释器

    PHP关键字异构化实验 PHP词法分析和语法分析 简单理解PHP代码执行过程:http://blog.csdn.net/risingsun001/article/details/22888861 PH ...

  3. Java中File

    1.什么是流? Java中的流是个抽象的概念,当程序需要从某个数据源读入数据的时候,就会开启一个数据流,数据源可以是文件.内存或网络等等.2.使用File类操作文件或目录属性 public class ...

  4. 编写自己的一个简单的web容器(二)

    昨天我们已经能够确定浏览器的请求能够被我们自己编写的服务类所接收并且我们服务类响应的数据也能够正常发送到浏览器客户端,那么我们今天要解决的问题就是让我们的数据能够被浏览器识别并解析. Http(Htt ...

  5. C++构造函数虚函数例题

    虚函数: #include <iostream> class A { public: A ():m_iVal() { test(); } virtual void func() { std ...

  6. Linux下关闭JBoss实例

    本文内容: 查看JBoss运行实例 #ps -ef|grep java 上图就是运行结果(部分结果),其中一个服务器上可能会运行多个JBOSS server实例,找到你需要看的那个. 其中 ps -e ...

  7. 008多对一 关联映射 --- many-to-one

    多对一 --- many-to-one 一对多 --- one-to-many 一对一 --- one-to-one 多对多 --- many-to-many 场景:用户和组:从用户角度来,多个用户属 ...

  8. 物理CPU 逻辑CPU 核数

    一.概念 ① 物理CPU 实际Server中插槽上的CPU个数 物理cpu数量,可以数不重复的 physical id 有几个 ② 逻辑CPU ③ CPU核数  一块CPU上面能处理数据的芯片组的数量 ...

  9. 【R与数据库】R + 数据库 = 非常完美

    前言 经常用R处理数据的分析师都会对dplyr包情有独钟,它强大的数据整理功能让原始数据从杂乱无章到有序清晰,便于后期进一步的深入分析,特别是配合上数据库的使用,更是让分析师如虎添翼,轻松搞定Exce ...

  10. centos6.5 ssh免密码登陆

    ssh-keygen -t rsa ssh-copy-id -i ~/.ssh/id_rsa.pub hadoop1