本人是开发小白,再无意中使用某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 >