How to remove the black line at the top of the tabbar and add a shadow effect ？

[geniu-vs]

My team needs a style like this： But I set tabBarShadowStyle to no effect. How should tabBarShadowStyle be used ? I can remove the black line by set tabBarStyle's 'overflow: hidden'. I can also set shadow by set tabBarStyle.shadowColor. But when I set the 'overflow: hidden', the shadow also disappeared, the two can only choose one, what should I do?

this is my code:

import React, { Component } from 'react'; import { Image, StyleSheet, Text, View } from 'react-native'; import px2pd from './js/utils/px2dp'; import { Navigator } from 'react-native-deprecated-custom-components'; import TabNavigator from 'react-native-tab-navigator'; import Home from './js/page/root/home'; import Tribe from './js/page/root/tribe'; import Event from './js/page/root/event'; import Data from './js/page/root/data'; import Myset from './js/page/root/myset';

type Props = {}; export default class App extends Component { constructor(props) { super(props); this.state = { selectedTab: 'home', selectedIndex: 0, icons: [{ image: require('./js/image_local/ICON/home_unsel.png'), imageSelected: require('./js/image_local/ICON/home_sel.png') },{ image: require('./js/image_local/ICON/tribe_unsel.png'), imageSelected: require('./js/image_local/ICON/tribe_sel.png') },{ image: require('./js/image_local/ICON/event_unsel.png'), imageSelected: require('./js/image_local/ICON/event_sel.png') },{ image: require('./js/image_local/ICON/data_unsel.png'), imageSelected: require('./js/image_local/ICON/data_sel.png') },{ image: require('./js/image_local/ICON/myset_unsel.png'), imageSelected: require('./js/image_local/ICON/myset_sel.png') }] } } render() { return (

{this._tabItem(0, 'home', '首页', this.state.icons[0].image, this.state.icons[0].imageSelected, Home)} {this._tabItem(1, 'tribe', '部落', this.state.icons[1].image, this.state.icons[1].imageSelected, Tribe)} {this._tabItem(2, 'event', '赛事', this.state.icons[2].image, this.state.icons[2].imageSelected, Event)} {this._tabItem(3, 'data', '数据', this.state.icons[3].image, this.state.icons[3].imageSelected, Data)} {this._tabItem(4, 'myset', '我的', this.state.icons[4].image, this.state.icons[4].imageSelected, Myset)}

    );
};

_tabItem(index, componentName, title, image, imageSelected, component) {
    return(
        <TabNavigator.Item
            tabStyle = {styles.tabItem}
            selected = {index === this.state.selectedIndex}
            title = {title}
            titleStyle = {[{color: '#5C5C5C'}, styles.tabItemTitle]}
            selectedTitleStyle = {[{color: '#7A81FF'}, styles.tabItemTitle]}
            renderIcon = {() => <Image style = {styles.tabItemIcon} source = {image}/>}
            renderSelectedIcon = {() => <Image style = {styles.tabItemIcon} source = {imageSelected}/>}
            onPress = {this._onPress.bind(this, index)}
        >
            <Navigator initialRoute = {{
                name: componentName,
                component: component
            }} configureScence = {() => {
                return Navigator.SceneConfigs.FloatFromBottom;
            }} renderScene = {(route, navigator) => {
                let Component = route.component;
                return <Component {...route.params} navigator = {navigator}/>
            }}
            />
        </TabNavigator.Item>

    );
}
_onPress(index) {
    this.setState({selectedIndex: {index}});
}

}

const styles = StyleSheet.create({

tabbar: {
    backgroundColor: '#FFFFFF',
    overflow: 'hidden'
},
tabBarShadow: {
    shadowColor: '#D7D7D7',
    shadowOpacity: 0.52
},
tabItem: {
    marginTop: px2pd(13),
    marginBottom: px2pd(16),
    flexDirection: 'column',
    alignItems: 'center'
},
tabItemIcon: {
    width: px2pd(44),
    height: px2pd(44)
},
tabItemTitle: {
    fontSize: px2pd(24),
    textAlign: 'center',
    marginTop: px2pd(1)
}

});

[ppv94]

Add

   <TabNavigator 
        tabBarShadowStyle={{backgroundColor:'transparent'}}
       >
      {.....}
   </TabNavigator>