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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hopefullman/article/details/86064014

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

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

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

下面开始代码部分：

引入：

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 (
      <View>
        <Icon name="sync" size={28} color={focused  ? '#2aabe4' : '#999'}/>
        <Text style={{color: focused ? '#2aabe4' :'#999'}}>刷新</Text>
      </View>
     );
  }else{
    return (
      <View>
        <Icon name="signal" size={21} color={focused  ? '#2aabe4' : '#999'}/>
        <Text style={{color: focused ? '#2aabe4' :'#999'}}>趋势</Text>
      </View>
     );

  }
    
    };

编写路由：

<Router >
        <Scene key='Route'>

        <Tabs 
                  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'
                  >
                <Scene
                    hideNavBar
                    icon={TabIconfir}
                    key='Fourywy'
                    component={Fourywy} title='首页' />

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

           </Scene>

</Router >