1.安装 react-native-tab-navigator
yarn add react-native-tab-navigator
2.页面调用
/**
* 主页面
*/
import React, {Component} from 'react';
import {
View,
Image,
StyleSheet
} from 'react-native';
// 底部导航栏
import TabNavigator from 'react-native-tab-navigator';
// 首页
import HomePage from './HomePage';
// 购物车
import ShopCarPage from './ShopCarPage';
// 我的
import MinePage from './MinePage';
// 图片资源
import { images } from '../../res';
const dataSource = [
{
icon:images.tabbar_home_normal,
selectedIcon:images.tabbar_home_selected,
tabPage:'Home',
tabName:'首页',
component:HomePage
},
{
icon:images.tabbar_shopcar_normal,
selectedIcon:images.tabbar_shopcar_selected,
tabPage:'ShopCar',
tabName:'购物车',
component:ShopCarPage
},
{
icon:images.tabbar_mine_normal,
selectedIcon:images.tabbar_mine_selected,
tabPage:'Mine',
tabName:'我的',
component:MinePage
}
];
var navigation = null;
export default class MainPage extends Component {
constructor(props) {
super(props);
navigation = this.props.navigation;
this.state = {
selectedTab:'Home'
};
}
render() {
let tabViews = dataSource.map((item,i) => {
return (
<TabNavigator.Item
title={item.tabName}
selected={this.state.selectedTab===item.tabPage}
titleStyle={{color:'#999999'}}
selectedTitleStyle={{color:'#ED5100'}}
renderIcon={()=><Image style={styles.tabIcon} source={item.icon}/>}
renderSelectedIcon = {() => <Image style={styles.tabIcon} source={item.selectedIcon}/>}
tabStyle={{alignSelf:'center'}}
onPress = {() => {this.setState({selectedTab:item.tabPage})}}
key={i}
>
<item.component navigation={navigation}/>
</TabNavigator.Item>
);
});
return (
<View style={styles.container}>
<TabNavigator
hidesTabTouch={true}
>
{tabViews}
</TabNavigator>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
tabIcon:{
width:23,
height:23,
}
});
3.效果图