react-native-tab-navigator组件怎么用

小编给大家分享一下react-native-tab-navigator组件怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

我们提供的服务有：网站建设、网站制作、微信公众号开发、网站优化、网站认证、凤县ssl等。为成百上千企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的凤县网站制作公司

要做的效果很简单，如下图所示：

使用基本教程

1.引入组件

import TabNavigator from 'react-native-tab-navigator';

Github上的地址

2.render方法中返回：

render() { 
  return ( 
    
     
      } 
      renderSelectedIcon={() => } 
      onPress={() => this.setState({ selectedTab: '电影' })}> 
       // 这里放入页面组件
      
      } 
      renderSelectedIcon={() => } 
      onPress={() => this.setState({ selectedTab: '音乐' })}> 
       
      
      } 
      renderSelectedIcon={() => } 
      onPress={() => this.setState({ selectedTab: '图书' })}> 
       
      
      } 
      renderSelectedIcon={() => } 
      onPress={() => this.setState({ selectedTab: '我的' })}> 
       
      
     
    
  ); 
 }

引入页面组件：

import MoviePage from './pages/MoviePage';
import MusicPage from './pages/MusicPage';
import BookPage from './pages/BookPage';
import MyPage from './pages/MyPage';

设置state状态机：

constructor(props){
 super(props);
 this.state = {
  selectedTab:'电影'
 }
}

引入基本样式：

const styles = StyleSheet.create({
 container:{
 flex:1,
 backgroundColor:'#fff'
 },
 tabText:{
 color:'#000000',
 fontSize:10
 },
 selectedTabText:{
 color:'#D81E06'
 },
 icon:{
 width:20,
 height:20
 }
})

这个时候效果已经出来了，我们继续抽象组件：

将每一个栏目抽出来放到一个统一的方法中：

_renderTabarItems(selectedTab,icon,selectedIcon,Component){
 return (
   } 
   renderSelectedIcon={() => } 
   onPress={() => this.setState({ selectedTab: selectedTab })}
  >
   
  
 )

 }

此时，render方法中就直接引用四个方法即可：

render() {
 return (
  
  
   {this._renderTabarItems('电影',require('../img/movie_gray.png'),require('../img/movie_red.png'),MoviePage)}
   {this._renderTabarItems('音乐',require('../img/music_gray.png'),require('../img/music_red.png'),MusicPage)}
   {this._renderTabarItems('图书',require('../img/book_gray.png'),require('../img/book_red.png'),BookPage)}
   {this._renderTabarItems('我的',require('../img/my_gray.png'),require('../img/my_red.png'),MyPage)}
  
  
 );
 }

至此，已经初步完成。

组件的属性集合：

Props

TabNavigator props

prop	default	type	description
sceneStyle	inherited	object (style)	场景样式，即Tab页容器的样式，可按View的style设置
tabBarStyle	inherited	object (style)	TabBar的样式，基本也可按照普通的style写法进行设置
tabBarShadowStyle	inherited	object (style)	TabBar阴影的样式，不过对于扁平化的设计，这个属性应该用处不大
hidesTabTouch	false	boolean	bool类型，即是否隐藏Tab按钮的按下效果

TabNavigator.Item props

prop	default	type	description
renderIcon	none	function	即图标，但为function类型，所以这里需要用到Arrow Function
renderSelectedIcon	none	function	选中状态的图标，非必填，也是function类型
badgeText	none	string or number	即Tab右上角的提示文字，可为String或Number，类似QQ中Tab右上角的消息提示，非必填
renderBadge	none	function	提示角标渲染方式，function类型，类似render的使用，非必填
title	none	string	标题，String类型，非必填
titleStyle	inherited	style	标题样式，style类型，非必填
selectedTitleStyle	none	style	选中标题样式，style类型，非必填
tabStyle	inherited	style	styling for tab
selected	none	boolean	bool型，是否选中状态，可使用setState进行控制，默认false
onPress	none	function	即点击事件的回调函数，这里需要控制的是state
allowFontScaling	false	boolean	bool型，是否允许字体缩放，默认false

以上是“react-native-tab-navigator组件怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

文章名称：react-native-tab-navigator组件怎么用
文章路径：http://mswzjz.cn/article/igedgj.html