ReactNative项目分享（1）Tabbar基础框架

研究RN一段时间了，也做了个小项目。
总结一下经验，分享一下心得。

我是从iOS过来的，做RN感觉还真是得心应手。两者的理念还是比较相近的——组件化编程。然后RN的界面布局方案遥遥领先iOS的layout方案。真心不错！各种callback、return多值等js优势就不说了。下面我将会不定期分享我的项目。请大家多关注。

1、Tabbar式布局以及导航

我接到的需求是做一个tabbar为基础框架的app。看了官方文档后发现tabbar的官方实现是无法跨平台的。于是找到了一个替代方案：react-native-tab-navigator。总的来说这个库还是面面俱到的，但是对于我们国内习惯一般tabbar显示在第一个页面，然后下级页面一般隐藏的，然后每个tabbar项目分别为navigator。于是我解决方案如下：

---index.ios.js---
render() {
       return (
            
        );
    }

---Navibar.js---
renderScene(route, navigator) {
        return ;
    }
    render() {
        return (
            
        );
    }

重点是navigator作为props传给买个独立tab页，作为tab页的导航器

---Tabbar.js---
    /** 渲染tabbar **/  
    renderTabView(title, tabNomal, tabPress, tabName, tabContent){  
        return(  
         }  
            renderSelectedIcon = {() => }  
            selected = {this.state.selectedTab === tabName}  
            selectedTitleStyle={{color: '#f85959'}}  
            onPress = {() => this.onPress(tabName)}    
        >
            {tabContent}  
          
        );  
    }  

    /** 自定义tabbar **/  
    tabBarView(){  
    return (  
          
            {this.renderTabView('1', TAB_NORMAL_1, TAB_PRESS_1, '1', this.renderFirstViewContent())}  
            {this.renderTabView('2', TAB_NORMAL_2, TAB_PRESS_2, '2', this.renderSecondViewContent())}  
            {this.renderTabView('3', TAB_NORMAL_3, TAB_PRESS_3, '3', this.renderThirdViewContent())}  
          
    );  
    }  

    /** 渲染第一个页面 **/  
    renderFirstViewContent() {
        return(
            
                first
              
        )
    }

    /** 渲染第二个页面 **/  
    renderSecondViewContent() {
        return(
            
        )
    }

    /** 渲染第三个页面 **/  
    renderThirdViewContent() {
        return(
            
        )
    }

    render() {  
    let tabBarView = this.tabBarView();  
    return (  
          
        {tabBarView}  
          
    );  
    }

}

tab页面直接使用this.props.navigator.push了，然后我还做了一个NavibarView.js同样作为props传进去方便自定义导航栏左右键设置。

---SecondVC.js---
/**
     * push到详情页
     */
    pushPostDetail(postItem) {
        this.props.navigator.push({
            title: "Delivery details",
            component: PostdetailVC,
            passProps: {
                postItem: postItem
            },
        });
    }

    render() {
        return (
            
                
                
                
                 {AsyncStorage.clear()}}>
                       
        );
    }
}

到这里为止一个tabbar+navigtor的基础框架出来了。
下一篇将会分享网络实现。敬请期待！