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

【问题标题】：Change the tabBar style in react-native using ex navigation使用 ex 导航更改 react-native 中的 tabBar 样式
【发布时间】：2017-01-25 18:21:59
【问题描述】：

我正在使用 ex-navigation 在我的应用程序中导航。一切正常，除了我想更改 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'}}>

我错过了什么吗？

【问题讨论】：

标签： react-native

【解决方案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

【讨论】：

是的，就是这样。谢谢。