react-native-router-flux tabbar 实现底部导航和切换导航页面 动态改变tabbar显示

先看效果图，是你需要的吗？

效果下面画了圈圈的：tabbar开始是头条，当你点击头条后就换成刷新

本人是开发小白，再无意中使用某C浏览器时候发现了一个好玩的功能，每个程序员都有强迫症，借着上班空闲时间，搞一下。

我开发RN用的导航路由是react-native-router-flux，因为学习成本低，但是很蹩脚......教程难搞到，都是千篇一律....

下面开始代码部分：

引入：

import React, { Component } from 'react';
import { Platform,StyleSheet,Text,View,Dimensions} from 'react-native';
import { Scene, Router ,Actions ,Tabs} from 'react-native-router-flux';

声明变量：

const TabIconth = ({focused , title}) => {
  if (focused==true) {
    return (
     
       
        刷新
     
     );
  }else{
    return (
     
       
        趋势
     
     );

  }
    
    };

编写路由：

        

                          swipeEnabled={true}
                  wrap={false}
                  hideNavBar
                  upperCaseLabel={true}
                  showLabel={false}
                  tabBarStyle={{backgroundColor: "#fff",borderTopWidth:1,borderTopColor:'#ddd'}}
                  tabStyle={{backgroundColor: "#fff"}}
                  labelStyle={{fontSize:14}}
                  activeBackgroundColor="#2aabe4"
                  inactiveBackgroundColor="#999"
                  activeTintColor='#2aabe4'
                  inactiveTintColor='#999'
                  >
                                    hideNavBar
                    icon={TabIconfir}
                    key='Fourywy'
                    component={Fourywy} title='首页' />

                                    hideNavBar
                    icon={TabIconth}
                    key='Ywyqs'
                    component={Ywyqs} title='趋势'/>