本站文章均为 李华明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 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'
}
)
}
>
<
View
style
=
{
{
flex
:
1
,
backgroundColor
:
'#fff'
,
justifyContent
:
'center'
}
}
>
<
Text
style
=
{
{
fontSize
:
20
}
}
>我是第一个选项卡，直接书写出的视图
!
<
/
Text
>
<
/
View
>
<
/
TabNavigator
.
Item
>
<
TabNavigator
.
Item
selected
=
{
this
.
state
.
selectedTab
===
'profile'
}
title
=
"Profile"
renderIcon
=
{
(
)
=
>
<
Image
source
=
{
require
(
'./res/personal_normal.png'
)
}
/
>
}
renderSelectedIcon
=
{
(
)
=
>
<
Image
source
=
{
require
(
'./res/personal_focus.png'
)
}
/
>
}
onPress
=
{
(
)
=
>
this
.
setState
(
{
selectedTab
:
'profile'
}
)
}
>
<
TestPage
/
>
<
/
TabNavigator
.
Item
>
<
/
TabNavigator
>
.
.
.
.
.
.
)
;
}
|
TabNavigator.Item: 每个选项卡的组件名，其中属性解释：
selected：当前选项卡是否被选中
title： 标题
renderIcon：icon
renderSelectedIcon：被选中时的icon
badgeText：提示的角标数字
onPress：点击后事件响应函数
当选项卡被选中后，才会显示选项卡绘制的视图内容。
最后给出一个示例,两个文件：
Main.js
|
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
import
React
,
{
Component
}
from
'react'
;
import
{
View
,
Text
,
StyleSheet
,
Image
,
}
from
'react-native'
;
import
TabNavigator
from
'react-native-tab-navigator'
;
import
TestPage
from
'./TestPage'
;
export
default
class
Main
extends
Component
{
constructor
(
props
)
{
super
(
props
)
;
this
.
state
=
{
selectedTab
:
'home'
}
;
}
render
(
)
{
return
(
<
View
style
=
{
{
flex
:
1
}
}
>
<
Text
style
=
{
styles
.
himiTextStyle
}
>
Himi
React
Native
系列教程
<
/
Text
>
<
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'
}
)
}
>
<
View
style
=
{
{
flex
:
1
,
backgroundColor
:
'#fff'
,
justifyContent
:
'center'
}
}
>
<
Text
style
=
{
{
fontSize
:
20
}
}
>我是第一个选项卡，直接书写出的视图
!
<
/
Text
>
<
/
View
>
<
/
TabNavigator
.
Item
>
<
TabNavigator
.
Item
selected
=
{
this
.
state
.
selectedTab
===
'profile'
}
title
=
"Profile"
renderIcon
=
{
(
)
=
>
<
Image
source
=
{
require
(
'./res/personal_normal.png'
)
}
/
>
}
renderSelectedIcon
=
{
(
)
=
>
<
Image
source
=
{
require
(
'./res/personal_focus.png'
)
}
/
>
}
onPress
=
{
(
)
=
>
this
.
setState
(
{
selectedTab
:
'profile'
}
)
}
>
<
TestPage
/
>
<
/
TabNavigator
.
Item
>
<
/
TabNavigator
>
<
/
View
>
)
;
}
}
;
var
styles
=
StyleSheet
.
create
(
{
tab
:
{
height
:
100
,
backgroundColor
:
'#eee'
,
alignItems
:
'center'
}
,
himiTextStyle
:
{
backgroundColor
:
'#eee'
,
color
:
'#f00'
,
fontSize
:
30
,
marginTop
:
30
,
}
,
}
)
;
|
TestPage.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
import
React
,
{
Component
}
from
'react'
;
import
{
Text
,
View
,
}
from
'react-native'
;
import
TabNavigator
from
'react-native-tab-navigator'
;
export
default
class
TestPage
extends
Component
{
constructor
(
props
)
{
super
(
props
)
;
this
.
state
=
{
selectedTab
:
'home'
}
;
}
render
(
)
{
return
(
<
View
style
=
{
{
flex
:
1
,
backgroundColor
:
'#eee'
,
justifyContent
:
'center'
}
}
>
<
Text
style
=
{
{
fontSize
:
20
,
color
:
'#f00'
}
}
>我是
TestPage，导入使用的
!
<
/
Text
>
<
/
View
>
)
;
}
}
;
|
效果演示(点击查看动态图)：
