360SDN.COM

【REACT NATIVE 系列教程之十一】插件的安装、使用与更新(示例:react-native-tab-navi

来源:黑米GameDev街区   2017-06-18 17:02:58    评论:0点击:



本篇主要来详细介绍如何安装、升级插件及讲解一个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 指定 镜像源

[email protected] : @符号前是 插件名, @ 符号后是插件 目标版本号

(如果目标版本号yyy填:latest  表示该插件的最新版本)  

zzz :制定的镜像源地址

这里举例:

npm install[email protected] –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={() => <Image source={require('./res/home_normal.png')} />}
            renderSelectedIcon={() => <Image source={require('./res/home_focus.png')} />}
            badgeText="61"
            onPress={() => this.setState({ selectedTab: 'home' })}>
 
        <Viewstyle={{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

importReact, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
 } from 'react-native';
 
importTabNavigatorfrom 'react-native-tab-navigator';
importTestPagefrom './TestPage';
 
export default class Main extends Component {
 constructor(props) {
 super(props);
 this.state = {
      selectedTab:'home'
    };
 }
 
  render() {
    return (
      <Viewstyle={{flex: 1}}>
        <Text style={styles.himiTextStyle}>HimiReactNative 系列教程</Text>
        <TabNavigatortabBarStyle={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' })}>
        <Viewstyle={{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

importReact, { Component } from 'react';
import {
  Text,
  View,
 } from 'react-native';
 
importTabNavigatorfrom 'react-native-tab-navigator';
 
export default class TestPage extends Component {
 constructor(props) {
 super(props);
 this.state = {
      selectedTab:'home'
    };
 }
 
  render() {
    return (
      <Viewstyle={{flex:1,backgroundColor:'#eee',justifyContent:'center'}}>
          <Text style={{fontSize:20,color:'#f00'}}>我是TestPage,导入使用的!</Text>
      </View>
    );
  }
};

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

 
为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权