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

Posted 2022-05-28 李华明Himi

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

width="150" height="210" frameborder="0" scrolling="no" src="http://widget.weibo.com/relationship/bulkfollow.php?language=zh_cn&uids=1916000601&wide=1&color=FFFFFF,FFFFFF,0082CB,666666&showtitle=0&showinfo=1&sense=0&verified=1&count=1&refer=http%3A%2F%2Fwww.himigame.com%2Freact-native%2F2294.html&dpc=1" style="margin: 0px; padding: 0px; border-width: 0px; font-family: inherit;font-size:undefined; font-style: inherit; font-variant-caps: inherit; line-height: inherit; max-width: 100%;">

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

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

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

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

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

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

 

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

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

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

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

            新增加了一条：”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  进行查看版本，如下图：

 

 

5. 插件的使用：

5.1: 首先导入（使用node_modules下的模块，不需要路径）：

1	import TabNavigator from 'react-native-tab-navigator' ;

5.2 :  绘制代码段：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

render ( )      return (        . . . . . .          < TabNavigator tabBarStyle = styles . tab >              < TabNavigator . Item              selected = this . state . selectedTab === 'home'              title = "Home"              renderIcon = ( ) = > < Image source = require ( './res/home_normal.png' ) / >              renderSelectedIcon = ( ) = > < Image source = require ( './res/home_focus.png' ) / >              badgeText = "61"              onPress = ( ) = > this . setState ( selectedTab : 'home' REACT NATIVE 系列教程之十二REACT NATIVE(JS/ES)与IOS(OBJECT-C)交互通信 REACT NATIVE 系列教程之十二REACT NATIVE(JS/ES)与IOS(OBJECT-C)交互通信 REACT NATIVE 系列教程之十三利用LISTVIEW与TEXTINPUT制作聊天/对话框&&获取组件实例常用的两种方式 REACT NATIVE 系列教程之十三利用LISTVIEW与TEXTINPUT制作聊天/对话框&&获取组件实例常用的两种方式 REACT NATIVE 系列教程之十真机运行报错COMMAND /BIN/SH FAILED WITH EXIT CODE 1 的解决方法 后盾 React Native 开发系列视频课程