occ-mobile/app/containers/commodity/commoditydetail/TabBar.js

import React from 'react'
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Dimensions,
  PixelRatio,
} from 'react-native'
import Icon from '../../../components/Iconfont/Iconfont'
import { NavigationActions } from '../../../utils'
import { isIphoneX } from '../../common/theme/config'
const { width, height } = Dimensions.get('window')

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

  render() {
    return (
      <View
        style={{
          flexDirection: 'row',
          paddingLeft: 10,
          paddingTop: isIphoneX() ? HEADERSTYLE.paddingTop : 0,
          borderBottomColor: '#DDD',
          borderBottomWidth: 1 / PixelRatio.get(),
        }}
      >
        <TouchableOpacity
          style={{ alignSelf: 'flex-end' }}
          onPress={() => this.props.dispatch(NavigationActions.back())}
        >
          <Icon name="icon-icon-fanhui" size={26} color={'#666'} />
        </TouchableOpacity>
        <View style={[styles.tabs, this.props.style, { width: width * 0.6 }]}>
          {this.props.tabs.map((tab, i) => {
            return (
              <TouchableOpacity
                key={tab}
                onPress={() => this.props.goToPage(i)}
                style={styles.tab}
              >
                <View
                  style={{
                    height: 40,
                    borderBottomColor:
                      this.props.activeTab === i ? '#666' : 'transparent',
                    borderBottomWidth: 2,
                    paddingTop: 10,
                  }}
                >
                  <Text
                    style={{
                      fontSize: 14,
                      lineHeight: 20,
                      color: '#333',
                      //color: this.props.activeTab === i ? "#333" : "rgb(204,204,204)"
                    }}
                  >
                    {tab}
                  </Text>
                </View>
              </TouchableOpacity>
            )
          })}
        </View>
      </View>
    )
  }
}

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

export default DetailTabBar