先上圖,一貫的作風(fēng)
Paste_Image.png
Paste_Image.png
看到這個(gè)圖片了吧
iOS是沒有問題的
可惜,安卓就是不顯示,很是惡心啊.安卓的坑真心的多.
首先要導(dǎo)入
import TabNavigator from 'react-native-tab-navigator'
這個(gè)框架還是挺好用的.
下面給段iOS的代碼吧,安卓的后續(xù)跟上.
這都是封裝好的,可以直接拿去使用
return (
<TabNavigator>
{/*--主頁(yè)--*/}
{this.renderTabBarItem('主頁(yè)', 'r_news_0', 'news','Dynamic', '主頁(yè)', Home)}
{/*--基酒--*/}
{this.renderTabBarItem('基酒', 'gfound_icon', 'found_ion','Find', '基酒', Base)}
{/*--發(fā)布--*/}
{this.renderTabBarItem1('發(fā)布', 'gnews_icon', 'news_icon','Message', '發(fā)布', 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 默認(rèn)圖標(biāo)名稱
* @param {any} selectedIconName 選中圖標(biāo)名稱
* @param {any} selectedTab 選中的tab
* @param {any} componentName 跳轉(zhuǎn)的頁(yè)面名字
* @param {any} component 跳轉(zhuǎn)的頁(yè)面
* @param {any} badgeText 角標(biāo)
* @returns
*/
renderTabBarItem(title, iconName, selectedIconName, selectedTab, componentName, component, badgeText){
return(
<TabNavigator.Item
title={title} // 傳遞變量,一定要加{}
renderIcon={() => <Image source={{uri: iconName}} style={styles.iconStyle}/>} // 圖標(biāo)
renderSelectedIcon={() =><Image source={{uri: selectedIconName}} style={styles.iconStyle}/>} // 選中的圖標(biāo)
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>
)
},
好了神一樣的代碼,有使用的就拿去吧 防止有些人只知道動(dòng)手,中間突出的部分代碼就不貼出來了. 實(shí)現(xiàn)起來也很簡(jiǎn)單,有興趣的自己研究.
