2017-01-25 42 views
0

我正在使用ex-navigation在我的應用程序內進行導航。一切工作正常,除了我想改變tabBar上方的白色線。使用ex導航更改react-native中的tabBar樣式

enter image description here

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> 
     ) 
    } 
} 

我曾試圖用邊框寬度和邊框顏色像下面改變的TabBar的風格,但它並沒有幫助我:

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

我失去somethig?

回答

0

所有你需要做的是更具體與您的borderColor

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

而且應該這樣做! Docs here

+0

是的,就是這樣。謝謝。 – Kakar