react-native + react-native-tab-navigator 实现 TabBar

Posted 2021-01-01 crazycode2

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.效果图