react-native-tab-navigator组件怎么用-创新互联

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

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

使用基本教程

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

TabNavigator.Item props

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

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。