加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-15 05:19:44 所属栏目:百科 来源:https://www.npmjs.com (此插
导读:本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/react-native/2294.html 本篇主要来详细介绍如何安装、升级插件及讲解一个react-native-tab-navigator的示例。 首先推荐一个插件网站:h

本站文章均为 李华明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. 我们可以看到插件介绍页面有详细的介绍,以及如何安装也有介绍,如下图:

图中红色框选的是插件在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 installxxx@yyy–save –registryzzz

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

–registry指定 镜像源

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

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

zzz:制定的镜像源地址

这里举例:

npm installreact-native-tab-navigator@latest –save

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

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

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

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

5. 插件的使用:

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

5.2 : 绘制代码段:

render ( ) {
return (
. .
< TabNavigator tabBarStyle = { styles . tab } >
< TabNavigator . Item
selected { this state selectedTab === 'home' }
title = "Home"
renderIcon { = > < Image source { require ( './res/home_normal.png' ) / > }
renderSelectedIcon './res/home_focus.png' }
badgeText "61"
onPress setState { selectedTab : 'home' } } >
View style flex : 1 , backgroundColor : '#fff' justifyContent 'center' >
Text fontSize 20 >我是第一个选项卡,直接书写出的视图 ! < / Text >
/ View >
Item >
Item
'profile' }
"Profile"
'./res/personal_normal.png' }
'./res/personal_focus.png' }
'profile' >
TestPage >
>
TabNavigator >
.
;
}

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

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

title:标题

renderIcon:icon

renderSelectedIcon:被选中时的icon

badgeText:提示的角标数字

onPress:点击后事件响应函数

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

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

Main.js

TestPage.js

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

相关内容
推荐文章
站长推荐
热点阅读