本站文章均为
李华明Himi
原创,转载务必在明显处注明：
width="150" height="210" frameborder="0" scrolling="no" src="http://widget.weibo.com/relationship/bulkfollow.php?language=zh_cn&uids=1916000601&wide=1&color=FFFFFF,FFFFFF,0082CB,666666&showtitle=0&showinfo=1&sense=0&verified=1&count=1&refer=http%3A%2F%2Fwww.himigame.com%2Freact-native%2F2294.html&dpc=1" style="margin: 0px; padding: 0px; border-width: 0px; font-family: inherit;font-size:undefined; font-style: inherit; font-variant-caps: inherit; line-height: inherit; max-width: 100%;">
本篇主要来详细介绍如何安装、升级插件及讲解一个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下的模块，不需要路径）：
import TabNavigator from 'react-native-tab-navigator' ; |
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 > . . . . . . ) ; } |
TabNavigator.Item: 每个选项卡的组件名，其中属性解释：
selected：当前选项卡是否被选中
title： 标题
renderIcon：icon
renderSelectedIcon：被选中时的icon
badgeText：提示的角标数字
onPress：点击后事件响应函数
当选项卡被选中后，才会显示选项卡绘制的视图内容。
最后给出一个示例,两个文件：
Main.js
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
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 > ) ; } } ; |
效果演示(点击查看动态图)：
