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

本篇主要来详细介绍如何安装、升级插件及讲解一个react-native-tab-navigator的示例。首先推荐一个插件网站：https://www.npmjs.com     （此插件属于半官方维护的）本文举例使用的插件：react-native-tab-navigator ，选项卡形式的导航1. 通过  https://www.npmjs.com 找到我们想使用的插件, 搜索：react-native-tab-navigator2. 我们可以看到插件介绍页面有详细的介绍，以及如何安装也有介绍，如下图： 图中红色框选的是插件在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-updates4.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={() => <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>
       ......
     );
  }[/code;'>
 TabNavigator.Item: 每个选项卡的组件名，其中属性解释：selected：当前选项卡是否被选中title： 标题renderIcon：iconrenderSelectedIcon：被选中时的iconbadgeText：提示的角标数字onPress：点击后事件响应函数当选项卡被选中后，才会显示选项卡绘制的视图内容。最后给出一个示例,两个文件：Main.js
[code=js;toolbar:false">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.jsimport 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>      );   } };

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