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

本站文章均为 李华明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下的模块，不需要路径）：

importTabNavigatorfrom'react-native-tab-navigator';

5.2 : 绘制代码段：

render(){
return(
......
<TabNavigatortabBarStyle={styles.tab}>
<TabNavigator.Item
selected={this.state.selectedTab==='home'}
title="Home"
renderIcon={()=><Imagesource={require('./res/home_normal.png')}/>}
renderSelectedIcon={()=><Imagesource={require('./res/home_focus.png')}/>}
badgeText="61"
onPress={()=>this.setState({selectedTab:'home'})}>

<Viewstyle={{flex:1,backgroundColor:'#fff',justifyContent:'center'}}>
<Textstyle={{fontSize:20}}>我是第一个选项卡，直接书写出的视图!</Text>
</View>

</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab==='profile'}
title="Profile"
renderIcon={()=><Imagesource={require('./res/personal_normal.png')}/>}
renderSelectedIcon={()=><Imagesource={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

importReact,{Component}from'react';
import{
View,Text,StyleSheet,Image,}from'react-native';

importTabNavigatorfrom'react-native-tab-navigator';
importTestPagefrom'./TestPage';

exportdefaultclassMainextendsComponent{
constructor(props){
super(props);
this.state={
selectedTab:'home'
};
}

render(){
return(
<Viewstyle={{flex:1}}>
<Textstyle={styles.himiTextStyle}>HimiReactNative系列教程</Text>
<TabNavigatortabBarStyle={styles.tab}>
<TabNavigator.Item
selected={this.state.selectedTab==='home'}
title="Home"
renderIcon={()=><Imagesource={require('./res/home_normal.png')}/>}
renderSelectedIcon={()=><Imagesource={require('./res/home_focus.png')}/>}
badgeText="61"
onPress={()=>this.setState({selectedTab:'home'})}>
<Viewstyle={{flex:1,justifyContent:'center'}}>
<Textstyle={{fontSize:20}}>我是第一个选项卡，直接书写出的视图!</Text>
</View>
</TabNavigator.Item>

<TabNavigator.Item
selected={this.state.selectedTab==='profile'}
title="Profile"
renderIcon={()=><Imagesource={require('./res/personal_normal.png')}/>}
renderSelectedIcon={()=><Imagesource={require('./res/personal_focus.png')}/>}
onPress={()=>this.setState({selectedTab:'profile'})}>
<TestPage/>
</TabNavigator.Item>
</TabNavigator>
</View>
);
}
};

varstyles=StyleSheet.create({
tab:{
height:100,backgroundColor:'#eee',alignItems:'center'
},himiTextStyle:{
backgroundColor:'#eee',color:'#f00',fontSize:30,marginTop:30,},});

TestPage.js

importReact,{Component}from'react';
import{
Text,View,}from'react-native';

importTabNavigatorfrom'react-native-tab-navigator';

exportdefaultclasstestPageextendsComponent{
constructor(props){
super(props);
this.state={
selectedTab:'home'
};
}

render(){
return(
<Viewstyle={{flex:1,justifyContent:'center'}}>
<Textstyle={{fontSize:20,color:'#f00'}}>我是TestPage，导入使用的!</Text>
</View>
);
}
};

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