使用ex导航更改react-native中的tabBar样式

Question

我正在使用导航功能在我的应用内导航。一切正常，除了我想改变tabBar上方的白色线。

export default class TabEntry extends React.Component {
    render() {
        return (
            <NavigationProvider router={Router}>
                <TabNavigation id="main" navigatorUID="main" initialTab="home"
                               tabBarColor="#22313F" tabBarHeight={48}>

                    <TabNavigationItem id="notification">
                        <StackNavigation id="notification" navigatorUID="notification" initialRoute={Router.getRoute('notification')}/>
                    </TabNavigationItem>

                    <TabNavigationItem id="home">
                        <StackNavigation id="home" navigatorUID="home" initialRoute={Router.getRoute('home')}/>
                    </TabNavigationItem>

                </TabNavigation>
            </NavigationProvider>
        )
    }
}

我试过通过应用borderWidth和BorderColor来改变tabBar的样式，但是它没有帮助我：

<TabNavigation id="main" navigatorUID="main" initialTab="home"
               tabBarColor="#22313F" tabBarHeight={48}
               tabBarStyle={{borderWidth: 1, borderColor: 'red'}}>

我错过了什么？

Answer 1

您需要做的就是更具体地使用borderColor：

<TabNavigation 
  id="main" 
  navigatorUID="main" 
  initialTab="home"         
  tabBarColor="#22313F" tabBarHeight={48}
  tabBarStyle={{
    borderWidth: 1, 
    borderTopColor: 'red'    // Just change this to `borderTopColor`
  }}>

应该这样做！ Docs here