react-native + react-native-tab-navigator 实现 TabBar
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.效果图