研究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的基礎框架出來了。
下一篇將會分享網絡實現。敬請期待！