react-native-scrollable-tab-view 實現 TabBar

1.創建組件

src/components/CustomTabBar/index.js

/**
 * 自定義選項卡
 */
import React, {Component} from 'react';
import {
  Platform,
  StyleSheet,
  StatusBar,
  View,
  TouchableOpacity,
  Image,
  Text,
} from 'react-native';
//第三方插件
import PropTypes from 'prop-types';
//自定義組件
import Common from '../../common'; //公共類
// 圖片資源
import { images } from '../../res';

const tabIcons = [
  images.tabbar_home_selected,
  images.tabbar_home_normal,
  images.tabbar_shopcar_selected,
  images.tabbar_shopcar_normal,
  images.tabbar_mine_selected,
  images.tabbar_mine_normal
];
 
export default class CustomTabBar extends Component {
  constructor(props) {
    super(props);
  }

  static setAnimationValue({value}) {
    console.log(value);
  }

  componentDidMount() {
    // Animated.Value監聽范圍 [0, tab數量-1]
    this.props.scrollValue.addListener(CustomTabBar.setAnimationValue);
  }

  renderTabOption(tab, i) {
    let color = this.props.activeTab === i ? "#ED5100" : "#999999"; // 判斷i是否是當前選中的tab，設置不同的顏色
    let tabName = this.props.tabNames[i];
    return (
      <TouchableOpacity onPress={()=>this.props.goToPage(i)} style={[styles.tab]} key={'tab' + i}>
        <View style={[styles.tabBox]}>
          <Image
            source={tabIcons[this.props.activeTab === i ? i*2 : i*2+1]}
            style={[styles.tabBoxIcon]}
          />
          <Text style={[styles.tabBoxName, {color: color}]}>
            {tabName}
          </Text>
        </View>
      </TouchableOpacity>
    );
  }

  renderTabs() {
    if (true !== this.props.placeMiddle || 0 !== this.props.tabs.length%2) {
      return this.props.tabs.map((tab, i) => this.renderTabOption(tab, i));
    } else  {
      let tabs = [];
      for (let i = 0; i < this.props.tabs.length; i++) {
        let tab = this.props.tabs[i];
        if (i === parseInt(this.props.tabs.length/2)) {
          let middle = (
            <View key={'tabMiddle'} style={[styles.tab]}>
              <View style={[styles.tabMiddleBox]}/>
            </View>
          );
          tabs.push(middle);
        }
        tabs.push(this.renderTabOption(tab, i));
      }
      return tabs;
    }
  }

  render() {
    let tabBarHeight = Platform.select({
      ios: Common.isIphoneX ? 68 : 49,
      android: 49,
    });
    return (
      <View key={'custom'} style={[styles.tabs, {height: tabBarHeight}]}>
        <StatusBar
          backgroundColor="#ffffff"
          barStyle="dark-content"
        />
        {this.renderTabs()}
      </View>
    );
  }
}
 
CustomTabBar.propTypes = {
  goToPage: PropTypes.func, // 跳轉到對應tab的方法
  activeTab: PropTypes.number, // 當前被選中的tab下標
  tabs: PropTypes.array, // 所有tabs集合
  tabNames: PropTypes.array, // 保存Tab名稱
  tabIconNames: PropTypes.array, // 保存Tab圖標
};
 
const styles = StyleSheet.create({
  tabs: {
    flexDirection: 'row',
    backgroundColor:'#ffffff',
    borderTopWidth: 0.5,
    borderTopColor: '#cdcdcd',
  },
  tab: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },
  tabBox: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    width: 48,
    height: 48,
  },
  tabMiddleBox: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    width: 48,
    height: 48,
  },
  tabBoxIcon: {
    width: 22,
    height: 22,
  },
  tabBoxName: {
    fontSize: 10,
    marginTop: 3,
  },
});

2.頁面調用

src/pages/MainPage/index.js

/**
 * 主頁面
 */
import React, {Component} from 'react';
import {
  BackHandler, // 物理返回鍵
  View,
  ToastAndroid,
  Image,
  StyleSheet
} from 'react-native';
import ScrollableTabView from 'react-native-scrollable-tab-view';
// 自定義選項卡
import { CustomTabBar } from '../../components';
// 首頁
import HomePage from './HomePage';
// 購物車
import ShopCarPage from './ShopCarPage';
// 我的
import MinePage from './MinePage';

export default class MainPage extends Component {

  render() {
    let tabNames = ['首頁', '購物車', '我的'];

    return (
      <ScrollableTabView
        initialPage={0} //初始tab索引
        renderTabBar={() =>
          <CustomTabBar
            tabNames={tabNames} //tab名稱
            placeMiddle={false} //中間是否占位，即中間是否需要用特殊按鈕樣式等
          />
        }
        tabBarPosition='bottom'
      >
        <HomePage key='homePage' tabLabel='home' />

        <ShopCarPage key='ShopCarPage' tabLabel='shopCar' />

        <MinePage key='minePage' tabLabel='mine' />
      </ScrollableTabView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  tabIcon:{
    width:23,
    height:23,
  }
});

3.效果圖