很久没有的登陆博客园了,密码都是找回的,从当年的大学生已经正常的走上了程序员的道路,看到之前发的博客还是写的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. 手机共享成wifi热点电脑无法上网的问题

    第二次遇到这样的问题,每次百度都不能解决我遇到的问题.上一次已经自己鼓捣着解决了,后来忘记怎么弄好的.第二次遇到这个问题,又是浪费了许多时间后,偶然弄好了,突然想起来上次就是这样弄好的.所以就针对我自 ...

  2. Apache solr(二)

    上一篇试着进行了solr的安装和配置,以及如何solr的检索,今天试着简单的将solr连接MySQL数据库(才尝试了单表.一对多和多对多的还有待研究) 1.MySQL的目录结构 2.新建一个democ ...

  3. dbunit进行DAO层Excel单元测试

    DAO层测试难点 可重复性,每次运行单元测试,得到的数据是重复的 独立性,测试数据与实际数据相互独立 数据库中脏数据预处理 不能给数据库中数据带来变化 DAO层测试方法 使用内存数据库,如H2.优点: ...

  4. ActionBar 通用方法

    自定义actionBar布局:标题居中,左边有返回按键 <?xml version="1.0" encoding="utf-8"?> <Rel ...

  5. 第 16 章 MySQL Cluster

    前言: MySQL Cluster 是一个基于 NDB Cluster 存储引擎的完整的分布式数据库系统.不仅仅具有高可用性,而且可以自动切分数据,冗余数据等高级功能.和 Oracle Real Cl ...

  6. Hibernate SQLQuery 原生SQL 查询及返回结果集处理-2

    1. 返回List, .setResultTransformer(      Transformers.ALIAS_TO_ENTITY_MAP);将结果转为Map,存放到list中,即list中为若干 ...

  7. es6之Generator

    1.Generator函数其实是一个封装了多个内部状态的状态机,执行它会返回一个遍历器对象,然后可以依次遍历Generator中的每一个状态,也就是分段执行,yield是暂停执行的标记,next恢复执 ...

  8. Scrapy的debug方式

    Scrapy不方便调试,但是为了深入学习框架内部的一些原理,有时候仅仅依靠日志是不够的.下面提供一种scrapy的debug方式 demo直接用来自官方例子来演示:https://github.com ...

  9. poj3207

    poj3207 题意 平面上,一个圆,圆的边上按顺时针放着n个点.现在要连m条边, 比如a,b,那么a到b可以从圆的内部连接,也可以从圆的外部连接. 给你的信息中,每个点最多只会连接的一条边.问能不能 ...

  10. java中的一些规则(菜鸟的课堂笔记)

    ls 查看目录下文件 java规则 代码都定义在类中,用class定义 禁止一个源文件写两个类: 一个源文件中,只能有一个类文件是pubic: 一个源文件中如果有多个类,编译完之后会产生多个class ...