react-native-tab-navigator组件的基本使用示例代码

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

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';

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() {
 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)}
  
  
 );
 }