#### 1.react-native-tab-navigator
安裝：
~~~
npm install react-native-tab-navigator --save
~~~
實現的效果
* * * * *
封裝后的代碼：
~~~
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
Navigator
} from 'react-native';
// 引入外部tab-navigator庫
import TabNavigator from 'react-native-tab-navigator';
import Home from '../home/home';
import Shop from '../shop/shop';
import Mine from '../mine/mine';
import More from '../more/more';
class main extends Component {
constructor(props){
super(props);
this.state={
selectedTab:'home'//第一次選中的tab
};
}
render() {
return (
//tab導航
<TabNavigator>
{this.tabInit('home','首頁','icon_tabbar_homepage','icon_tabbar_homepage_selected','首頁',Home)}
{this.tabInit('shop','商家','icon_tabbar_merchant_normal','icon_tabbar_merchant_selected','商家',Shop)}
{this.tabInit('mine','我的','icon_tabbar_mine','icon_tabbar_mine_selected','我的',Mine)}
{this.tabInit('more','更多','icon_tabbar_misc','icon_tabbar_misc_selected','更多',More)}
</TabNavigator>
);
}
//封裝導航
//選中的tab名,標題,默認圖標名字,選中圖標名字,組件名字,組件
tabInit(selectedTab,title,iconName,selecteIconName,componentName,component) {
return(
<TabNavigator.Item
selected={this.state.selectedTab === selectedTab}
//標題
title={title}
//選中的文字狀態
selectedTitleStyle={styles.tabTextSelect}
//默認圖標
renderIcon={() => <Image style={styles.tabImg} source={{uri:iconName}} />}
//選中的圖標
renderSelectedIcon={() => <Image style={styles.tabImg} source={{uri:selecteIconName}} />}
//點擊
onPress={() => this.setState({ selectedTab: selectedTab })}>
<Navigator
initialRoute={{ name: componentName, component: component }}
configureScene={(route) => {
return Navigator.SceneConfigs.PushFromRight;
}}
renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.params} navigator={navigator} />
}}
/>
</TabNavigator.Item>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
tabImg:{
width:25,
height:25
},
tabTextSelect:{
color:'#ef5100'
}
});
module.exports=main;
~~~
* * * * *
封裝前的代碼：
~~~
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
} from 'react-native';
// 引入外部tab-navigator庫
import TabNavigator from 'react-native-tab-navigator';
import Home from '../home/home';
import Shop from '../shop/shop';
import Mine from '../mine/mine';
import More from '../more/more';
class main extends Component {
constructor(props){
super(props);
this.state={
selectedTab:'home'
};
}
render() {
return (
//tab導航
<TabNavigator>
<TabNavigator.Item
selected={this.state.selectedTab === 'home'}
//標題
title="首頁"
//選中的文字狀態
selectedTitleStyle={styles.tabTextSelect}
//默認圖標
renderIcon={() => <Image style={styles.tabImg} source={{uri:'icon_tabbar_homepage'}} />}
//選中的圖標
renderSelectedIcon={() => <Image style={styles.tabImg} source={{uri:'icon_tabbar_homepage_selected'}} />}
//點擊
onPress={() => this.setState({ selectedTab: 'home' })}>
<Home />
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'shop'}
title="商店"
selectedTitleStyle={styles.tabTextSelect}
renderIcon={() => <Image style={styles.tabImg} source={{uri:'icon_tabbar_merchant_normal'}} />}
renderSelectedIcon={() => <Image style={styles.tabImg} source={{uri:'icon_tabbar_merchant_selected'}} />}
onPress={() => this.setState({ selectedTab: 'shop' })}>
<Shop />
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'mine'}
title="我的"
selectedTitleStyle={styles.tabTextSelect}
renderIcon={() => <Image style={styles.tabImg} source={{uri:'icon_tabbar_mine'}} />}
renderSelectedIcon={() => <Image style={styles.tabImg} source={{uri:'icon_tabbar_mine_selected'}} />}
onPress={() => this.setState({ selectedTab: 'mine' })}>
<Mine />
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'more'}
title="更多"
selectedTitleStyle={styles.tabTextSelect}
renderIcon={() => <Image style={styles.tabImg} source={{uri:'icon_tabbar_misc'}} />}
renderSelectedIcon={() => <Image style={styles.tabImg} source={{uri:'icon_tabbar_misc_selected'}} />}
onPress={() => this.setState({ selectedTab: 'more' })}>
<More />
</TabNavigator.Item>
</TabNavigator>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
tabImg:{
width:25,
height:25
},
tabTextSelect:{
color:'#ef5100'
}
});
module.exports=main;
~~~
