React-Native简单的TabBarIOS+NavigatorIOS框架搭建

利用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(            
                           
                 {this.setState({selectedTabItem:'home'});}}//点击事件
                                        >                    
                                        
                            
            {this.setState({selectedTabItem:'activity'})}}                
              >                    
                                  
                              
              {this.setState({selectedTabItem:'category'})}}              
                  >                  
                                    
                                   
              {this.setState({selectedTabItem:'cart'})}}          
                  >                
                              
                               
                {this.setState({selectedTabItem:'mine'})}}            
              >                
                                  
                            
               
 )   
 }})
module.exports = MainView;

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

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

//home.js中的跳转代码
var  HomeNext = require('../Component/home-next');
var HomeView = React.createClass({    
      render(){     
             return(             
                  
                                
                               
                                          home     
                                   
                  )    },   
 clickToNext(){       
           this.props.navigator.push({            
                  title:'首页-next',          
                  component:HomeNext      
      })  
  } 
 });