【REACT NATIVE 系列教程之十一】插件的安装、使用与更新(示例:R
本站文章均为 李华明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> ); } }; 效果演示(点击查看动态图): (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |