#### 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;
~~~
