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></Navibar>
        );
    }

---Navibar.js---
renderScene(route, navigator) {
        return <route.component 
              navigator = {navigator}  
            {...route.passProps}
            route = {route}
            />;
    }
    render() {
        return (
            <Navigator
                style = {{flex:1}}
                initialRoute = {{name: 'Tabbar', component: Tabbar}}
                renderScene = {this.renderScene}
            />
        );
    }

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

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

    /** 自定义tabbar **/  
    tabBarView(){  
    return (  
        <TabNavigator tabBarStyle = {styles.tabbar}>  
            {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())}  
        </TabNavigator>  
    );  
    }  

    /** 渲染第一个页面 **/  
    renderFirstViewContent() {
        return(
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                <Text>first</Text>
            </View>  
        )
    }

    /** 渲染第二个页面 **/  
    renderSecondViewContent() {
        return(
            <SecondVC navigator = {this.props.navigator} route = {this.props.route}></SecondVC>
        )
    }

    /** 渲染第三个页面 **/  
    renderThirdViewContent() {
        return(
            <ThirdVC navigator = {this.props.navigator} route = {this.props.route}></ThirdVC>
        )
    }

    render() {  
    let tabBarView = this.tabBarView();  
    return (  
        <View style={styles.container}>  
        {tabBarView}  
        </View>  
    );  
    }

}

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 (
            <View style = {styles.baseView}>
                <NavibarView 
                    routeName = {this.props.route.name}
                    navigator = {this.props.navigator}
                    titleText = 'SecondVC'
                    rightBtnText = '➡️'
                />
                <ListView
                    dataSource = {this.state.dataSource}
                    renderRow = {this.setupCells.bind(this)}
                    style = {styles.listViewStyle}
                    onEndReached = {this.loadMore.bind(this)}
                />
                
                <TouchableOpacity style = {{height: 60, backgroundColor: '#f00'}} onPress = {() => {AsyncStorage.clear()}}></TouchableOpacity>
            </View>           
        );
    }
}

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