先上圖,一貫的作風

Paste_Image.png

Paste_Image.png

看到這個圖片了吧

  iOS是沒有問題的
  可惜,安卓就是不顯示,很是惡心啊.安卓的坑真心的多.
  首先要導入
  import TabNavigator from 'react-native-tab-navigator'
  這個框架還是挺好用的.

下面給段iOS的代碼吧,安卓的后續跟上.

    這都是封裝好的,可以直接拿去使用

   return (
            <TabNavigator>
                {/*--主頁--*/}
                {this.renderTabBarItem('主頁', 'r_news_0', 'news','Dynamic', '主頁', Home)}
                {/*--基酒--*/}
                {this.renderTabBarItem('基酒', 'gfound_icon', 'found_ion','Find', '基酒', Base)}
                {/*--發布--*/}
                {this.renderTabBarItem1('發布', 'gnews_icon', 'news_icon','Message', '發布', News)}
                {/*--金融--*/}
                {this.renderTabBarItem('金融', 'gwo_icon', 'r_geren-0','Mine', '金融', Finance)}
                {/*--我的--*/}
                {this.renderTabBarItem('我的', 'gwo_icon', 'r_geren-0','Mine', '我的', Mine)}
            </TabNavigator>
        );


 /**
     * 
     * 
     * @param {any} title 名字
     * @param {any} iconName 默認圖標名稱
     * @param {any} selectedIconName 選中圖標名稱
     * @param {any} selectedTab 選中的tab
     * @param {any} componentName 跳轉的頁面名字
     * @param {any} component 跳轉的頁面
     * @param {any} badgeText 角標
     * @returns
     */
    renderTabBarItem(title, iconName, selectedIconName, selectedTab, componentName, component, badgeText){
        return(
            <TabNavigator.Item
                title={title}  // 傳遞變量,一定要加{}
                renderIcon={() => <Image source={{uri: iconName}} style={styles.iconStyle}/>} // 圖標
                renderSelectedIcon={() =><Image source={{uri: selectedIconName}} style={styles.iconStyle}/>}   // 選中的圖標
                onPress={()=>{this.setState({selectedTab:selectedTab})}}
                selected={this.state.selectedTab === selectedTab}
                selectedTitleStyle={styles.selectedTitleStyle}
                badgeText = {badgeText}
            >
                <Navigator
                    initialRoute={{name:componentName,component:component}}
                    configureScene={()=>{
            return Navigator.SceneConfigs.PushFromRight;
        }}
                    renderScene={(route,navigator)=>{
            let Component = route.component;
            return <Component {...route.passProps} navigator={navigator}/>;
        }}
                />
            </TabNavigator.Item>
        )
    },

好了神一樣的代碼,有使用的就拿去吧 防止有些人只知道動手,中間突出的部分代碼就不貼出來了. 實現起來也很簡單,有興趣的自己研究.