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