【REACT NATIVE 系列教程之十一】插件的安装、使用与更新(示例:REACT-NATIVE-TAB-NAVIGATOR)

原创 2016年06月02日 12:08:21

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 
转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/react-native/2294.html

本篇主要来详细介绍如何安装、升级插件及讲解一个react-native-tab-navigator的示例。

首先推荐一个插件网站:https://www.npmjs.com     (此插件属于半官方维护的)

本文举例使用的插件:react-native-tab-navigator ,选项卡形式的导航

1. 通过  https://www.npmjs.com 找到我们想使用的插件, 搜索:react-native-tab-navigator

2. 我们可以看到插件介绍页面有详细的介绍,以及如何安装也有介绍,如下图:

444444

图中红色框选的是插件在github的源码页面地址~

 

3. 下面对项目进行安装此插件:

3.1  打开终端,cd 到项目根路径

3.2 使用命令:npm install react-native-tab-navigator –save  进行安装,如下图:

3322111

3.3 安装成功后,你会在项目下的package.json文件内dependencies下看到(如下图):

asdf1

            新增加了一条:”react-native-tab-navigator”: “^0.3.2”

 

4. 更新插件的两种方式方式(上):

4.1:  打开终端,cd 到目标项目根路径

4.2 使用命令: npm install xxx@yyy –save –registry zzz

 –save 记录版本到项目的package.json下留底(一般最好都带上)

 –registry 指定 镜像源

 xxx@yyy : @符号前是 插件名,@符号后是插件目标版本号

      (如果目标版本号yyy填:latest  表示该插件的最新版本)  

zzz:制定的镜像源地址

这里举例:

         npm install react-native-tab-navigator@latest –save

        以上命令:更新react-native-tab-navigator插件到最新  ,且将版本号记录到项目的json文件中。    

4. 更新插件的两种方式方式(下):

4.1 :利用插件检查模块最新版本:npm-check-updates

4.2 :  安装到项目中,然后利用命令:ncu  进行查看版本,如下图:

111er 1111err

 

5. 插件的使用:

5.1: 首先导入(使用node_modules下的模块,不需要路径):

5.2 :  绘制代码段:

 

 TabNavigator.Item: 每个选项卡的组件名,其中属性解释:

selected:当前选项卡是否被选中

title: 标题

renderIcon:icon

renderSelectedIcon:被选中时的icon

badgeText:提示的角标数字

onPress:点击后事件响应函数

当选项卡被选中后,才会显示选项卡绘制的视图内容。

最后给出一个示例,两个文件:

Main.js

TestPage.js

 

效果演示(点击查看动态图):

user98

 

 

React-Native学习笔记之:使用Tab react-native-tab-navigator框架

在React Native中,我们通常使用react-native-tab-navigator来做底部导航栏效果,使用前先要在项目中引入对应 依赖库, 引用方法: windows环境,cmd命令窗口,...
  • true100
  • true100
  • 2017年03月29日 16:39
  • 8531

React Native底部导航react-native-tab-navigator

github上的地址:https://github.com/exponentjs/react-native-tab-navigator终端运行:npm install react-native-tab...
  • chichengjunma
  • chichengjunma
  • 2016年09月27日 15:38
  • 3996

TabBar切换页的实现——React-native-tab-navigator的使用

在构建TabBar的方式上,使用React-native-tab-navigator(https://github.com/exponentjs/react-native-tab-navigator)...
  • JLhaoran
  • JLhaoran
  • 2017年03月13日 16:03
  • 3598

ReactNative学习实例(八) 第三方组件TabNavigator底部导航栏

TabNavigator是github上开源的一个rn组件,是适用于ios和安卓两个平台的底部导航栏。 组件地址:https://github.com/expo/react-native-tab-n...
  • zhang___yong
  • zhang___yong
  • 2017年04月05日 18:39
  • 7751

react native android使用react-native-tab-navigator来做底部导航tabbar(1)

react native android使用react-native-tab-navigator来做底部导航tabor(1)
  • qq_27275015
  • qq_27275015
  • 2016年04月06日 20:43
  • 8133

React-Native学习--第三方 底部Tab react-native-tab-navigator

1.下载 npm install react-native-tab-navigator –save下载 2. 导入 import TabNavigator from 'react-nat...
  • jing85432373
  • jing85432373
  • 2017年01月11日 14:01
  • 7630

ReactNative学习十-Tab-Navigator

1.github地址 https://github.com/exponentjs/react-native-tab-navigator 2.package.json配置 "dependencies":...
  • zhukui66
  • zhukui66
  • 2016年04月06日 10:47
  • 2166

React Native调试插件

基于Chrome浏览器的React Native插件的安装与调试 1.在github上下载插件,链接如下: https://github.com/facebook/react-devtools/r...
  • chichengjunma
  • chichengjunma
  • 2016年09月01日 10:24
  • 1754

React Native开发必备的10个插件包

Sublime Text 具有漂亮的用户界面和强大的功能,例如代码缩略图,多重选择,快捷命令等。Sublime Text 更妙的是它的可扩展性。所以,这里挑选了全栈开发必备的10款 Sublime T...
  • xiangzhihong8
  • xiangzhihong8
  • 2016年07月10日 11:38
  • 4105

React Native Navigator 引入的那些坑

讲诉一下进入Navigator的那些错误。 当要引入Navigator的使用通常的做法是: import {Navigator} from "react-native" 当我们进行执行react na...
  • GL_MINE_CSDN
  • GL_MINE_CSDN
  • 2017年06月26日 16:17
  • 2648
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【REACT NATIVE 系列教程之十一】插件的安装、使用与更新(示例:REACT-NATIVE-TAB-NAVIGATOR)
举报原因:
原因补充:

(最多只允许输入30个字)