occ-mobile/app/components/toptab/TopTabBar.js

import React from 'react'
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Dimensions,
  PixelRatio,
} from 'react-native'
import Bubble from '../Bubble'

const { width, height } = Dimensions.get('window')

class TopTabBar extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <View
        style={{
          flexDirection: 'row',
          borderBottomColor: '#DDD',
          backgroundColor: '#fff',
          borderBottomWidth: 1 / PixelRatio.get(),
        }}
      >
        <View style={[styles.tabs, this.props.style, { width: width }]}>
          {this.props.tabs.map((tab, i) => {
            let right = 10
            if (
              (tab.split('/') && tab.split('/')[0].length > 2) ||
              tab.split('/')[1] > 9
            ) {
              right = 10
            } else {
              right = 16
            }
            return (
              <View key={tab} style={styles.tab}>
                <TouchableOpacity onPress={() => this.props.goToPage(i)}>
                  <View
                    style={{
                      height: 35,
                      justifyContent: 'center',
                      paddingTop: 5,
                      // borderBottomColor:
                      //   this.props.activeTab === i ? "#E14C46" : "transparent",
                      // borderBottomWidth: 2,
                    }}
                  >
                    <Text
                      style={{
                        fontSize: 14,
                        lineHeight: 20,
                        letterSpacing: 0.17,
                        color: this.props.activeTab === i ? '#E14C46' : '#333',
                      }}
                    >
                      {tab.split('/')[0]}
                    </Text>
                  </View>
                </TouchableOpacity>
                <Bubble
                  bubbleColor={'#E14C46'}
                  size={12}
                  fontSize={8}
                  style={{ position: 'absolute', right: right, top: 5 }}
                  value={tab.split('/')[1] ? parseFloat(tab.split('/')[1]) : 0}
                />
              </View>
            )
          })}
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  tab: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingBottom: 10,
  },
  tabs: {
    height: 35,
    flexDirection: 'row',
    // paddingTop: 10
  },
})

export default TopTabBar