利用TabBarIOS+ NavigatorIOS搭建简单的APP框架,先看效果图：

ww.gif

注意的点：
1，首先要知道React-Native组件的生命周期，就是类似iOS中的viewWillAppear，viewDidload，以及viewWillDisappeard方法的执行顺序,可以看看下面的文章
http://www.tuicool.com/articles/nu6zInB
2, React-Native的组件化，其实这个类似iOS中对控件的封装

ED98516F-5812-4449-AFEA-000C8B2BBE74.png

index.ios.js的中代码非常简单，所有框架的搭建全部封装到main.js中了，相对应的首页，活动，分类，购物车，我，中的页面搭建以及逻辑则移到对应的js文件中,这样逻辑就很清楚了。

首先来看mian.js

import React, { Component } from 'react';
import {   
       AppRegistry,    
       StyleSheet,    
        Text,   
       View,    
      TabBarIOS,   
       NavigatorIOS}     from 'react-native';
var HomeView = require('../Component/home');
var ActivityView = require('../Component/activity');
var CategoryView = require('../Component/category');
var CartView = require('../Component/cart');
var MineView = require('../Component/mine');
var  MainView = React.createClass({    
  //设置初始值    
        getInitialState(){        
              return{            
          //默认选中的tabbaritem            
            selectedTabItem:'home'        
    }    },    
    render(){        
       return(            
           <TabBarIOS                
                 barTintColor='#f9f9f9' //背景色              
                 translucent={true}   //半透明             
                 tintColor='red'      //前景色      >                
                 <TabBarIOS.Item                    
                       renderAsOriginal                    
                       title="首页"  //标题                  
                       icon={{uri:'首页',scale:2}}  //图标             
                       selectedIcon={{uri:'首页-选中',scale:2}} //选中图标                    
                       selected = {this.state.selectedTabItem == 'home'}  
                        onPress = {()=>{this.setState({selectedTabItem:'home'});}}//点击事件
                                        >                    
                        <NavigatorIOS                        
                              style={{flex: 1}}                        
                                initialRoute={{                            
                                    component: HomeView,    //设置根视图                        
                                    title:'首页'                        }}                    
                        />                
            </TabBarIOS.Item>                
            <TabBarIOS.Item                   
                   renderAsOriginal                    
                   title="活动"                    
                   icon={{uri:'活动',scale:2}}                    
                    selectedIcon={{uri:'活动-选中',scale:2}}                    
                    selected = {this.state.selectedTabItem == 'activity'}  
                  onPress={()=>{this.setState({selectedTabItem:'activity'})}}                
              >                    
                  <NavigatorIOS                       
                       style={{flex: 1}}                        
                      initialRoute={{                            
                       component: ActivityView,                           
                       title:'活动'                        }}                    
                  />                
              </TabBarIOS.Item>                
              <TabBarIOS.Item                    
                    renderAsOriginal                      
                      title = "分类"                    
                      icon = {{uri:'分类',scale:2}}                    
                      selectedIcon={{uri:'分类-选中',scale:2}}                   
                       selected = {this.state.selectedTabItem == 'category'}     
                     onPress={()=>{this.setState({selectedTabItem:'category'})}}              
                  >                  
                      <NavigatorIOS                     
                             style={{flex: 1}}                     
                             initialRoute={{                            
                                   component: CategoryView,                           
                                   title:'分类'                        }}                   
                   />              
                 </TabBarIOS.Item>                  
              <TabBarIOS.Item                 
                     renderAsOriginal                   
                     title = "购物车"                  
                    icon = {{uri:'购物车',scale:2}}                
                      selectedIcon={{uri:'购物车-选中',scale:2}}                   
                   selected = {this.state.selectedTabItem == 'cart'}                
                  onPress={()=>{this.setState({selectedTabItem:'cart'})}}          
                  >                
                  <NavigatorIOS                  
                        style={{flex: 1}}                    
                            initialRoute={{                       
                                       component: CartView,                       
                                       title:'购物车'                        }}              
                  />            
                </TabBarIOS.Item>               
                <TabBarIOS.Item                  
                      renderAsOriginal                
                      title = "我"             
                     icon = {{uri:'我',scale:2}}                   
                     selectedIcon={{uri:'我-选中',scale:2}}                    
                      selected = {this.state.selectedTabItem == 'mine'}                    
                    onPress={()=>{this.setState({selectedTabItem:'mine'})}}            
              >                
                  <NavigatorIOS                       
                           style={{flex: 1}}                     
                           initialRoute={{                           
                                 component: MineView,                            
                                    title:'我'                        }}                 
                 />                
                </TabBarIOS.Item>            
        </TabBarIOS>       
 )   
 }})
module.exports = MainView;

将所有tabbar和navbar界面封装起来，然后在index.ios .js中调用

//index.ios .js中首先导入MainView
var MainView = require('./Component/main');
class TabBarDemo extends Component{    
    render(){       
       return(
          //直接调用            
            <MainView/>      
    ); 
   }}
AppRegistry.registerComponent('TabBarDemo', () => TabBarDemo);

//home.js中的跳转代码
var  HomeNext = require('../Component/home-next');
var HomeView = React.createClass({    
      render(){     
             return(             
                 <View style={styles.container}> 
                       <TouchableOpacity 
                              activeOpacity={0.5} 
                              onPress={this.clickToNext}>         
                               <Text style={{
                                    fontSize:30,
                                    backgroundColor: 'red'}}>
                                          home</Text>     
                     </TouchableOpacity>              
          </View>        )    },   
 clickToNext(){       
           this.props.navigator.push({            
                  title:'首页-next',          
                  component:HomeNext      
      })  
  } 
 });