本篇主要来详细介绍如何安装、升级插件及讲解一个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>
);
}
};
|
效果演示(点击查看动态图)：
