react-native-router-flux tabbar實現底部導航和切換導航頁面 動態改變tabbar顯示
本人是開發小白，再無意中使用某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 >