React-Native实现TabBar切换界面

实现Tabbar切换的效果是引用的第三方(react-native-tab-navigator)插件
1.导入此插件-npm install react-native-tab-navigator
2.引用-import TabNavigator from 'react-native-tab-navigator';
使用的是ES6语法

效果图:

Paste_Image.png
代码:

/**
 * 1. npm install react-native-tab-navigator
 * 2. import TabNavigator from 'react-native-tab-navigator';
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  Platform,
  Image,
  Navigator,
  View,
  Text,
  TouchableOpacity
} from 'react-native';

import TabNavigator from 'react-native-tab-navigator';
import Home from '../home/YhHome';
import Mine from '../mine/YhMine';
import More from '../more/YhMore';
import Shop from '../shop/YhShop';
const styles = StyleSheet.create({
  titleStyle: {
    fontSize: 16,
    color: '#515151'
  },
  tab: {
    height: 52,
    alignItems: 'center',
    backgroundColor: 'rgb(241, 241, 241)'
  },
  iconStyle: {
    width: Platform.OS === 'ios' ? 26 : 25,
    height: Platform.OS === 'ios' ? 26 : 25
  },
  selectedTitleStyle: {
    color: 'orange'
  },
  navBar: {
    backgroundColor: '#03a9f4',
    height: (Platform.OS === 'ios') ? 64 : 44
  },
  navBarLeftButton: {
    flex: 1,
    width: 50,
    height: 50,
    alignItems: 'center',
    justifyContent: 'center',
    paddingLeft: 5
  },
  navBarRightButton: {
    marginRight: 5
  },
  navBarLeftTitle: {
    fontSize: 18,
    color: '#FFFFFF'
  },
  navBarTitleText: {
    fontWeight: '500',
    fontSize: 20,
    color: '#FFFFFF',
    marginTop: 10
  },
  icon: {
    width: Platform.OS === 'ios' ? 22 : 24,
    height: Platform.OS === 'ios' ? 20 : 24
  }
});

export default class YhTabBar extends Component {

  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'home'
    };
  }

  renderTabBarItem(title, iconName, iconSelectName, selectedTab, componentName, component) {
    return(
      <TabNavigator.Item
        title={title}
        renderIcon={() => <Image
          source={{uri: iconName}}
          style={styles.iconStyle}
        />}
        renderSelectedIcon={() => <Image
          source={{uri: iconSelectName}}
          style={styles.iconStyle}
        />}
        selected={this.state.selectedTab === selectedTab}
        onPress={()=>{this.setState({selectedTab:selectedTab})}}
        titleStyle={styles.titleStyle}
        selectedTitleStyle={styles.selectedTitleStyle}
      >
        <Navigator
          initialRoute={{name: componentName, title: title, component: component}}
          configureScene={() => {
            return Navigator.SceneConfigs.PushFromRight;
          }}
          renderScene={(route, navigator) => {
            let MyComponent = route.component;
            return <MyComponent {...route.passProps} navigator={navigator}/>;
          }}
          navigationBar={this.navBar()}
        />
      </TabNavigator.Item>
    )
  }

  render() {
    return (
      <TabNavigator tabBarStyle={styles.tab}>
        {/*--首页--*/}
        {this.renderTabBarItem('首页', 'icon_tabbar_homepage', 'icon_tabbar_homepage_selected', 'home', '主页', Home)}
        {/*--商家--*/}
        {this.renderTabBarItem('商家', 'icon_tabbar_merchant_normal', 'icon_tabbar_merchant_selected', '商家', 'shop', Shop)}
        {/*--我的--*/}
        {this.renderTabBarItem('我的', 'icon_tabbar_mine', 'icon_tabbar_mine_selected', 'mine', '我的', Mine)}
        {/*--更多--*/}
        {this.renderTabBarItem('更多', 'icon_tabbar_misc', 'icon_tabbar_misc_selected', 'more', '更多', More)}
      </TabNavigator>
    );
  }


  navBar() {
      return (
        <Navigator.NavigationBar
          style={styles.navBar}
          routeMapper={{
            LeftButton: this.LeftButton,
            RightButton: () => {
            },
            Title: (route) => this.setTitle(route.title)
          }}
        />
      );
  }

  LeftButton = (route, navigator, index) => {
    if (index > 0) {
      return (
        <TouchableOpacity
          style={styles.navBarLeftButton}
          onPress={() => {
              navigator.pop();
          }}
        >
         <Text>返回</Text>
        </TouchableOpacity>
      );
    } else {
      return null
    }
  }

  setTitle(title){
    return (
      <View>
        <Text style={styles.navBarTitleText} numberOfLines={1}>
          {title}
        </Text>
      </View>
    );
  }
}