如何在React-native中更改样式可滚动选项卡

时间:2017-08-08 10:48:16

标签: reactjs react-native react-native-android react-native-ios native-base

我在我的项目中使用Native-Bae并且已经为可滚动选项卡添加了这些样式元素,但它并没有根据需要更改颜色。这是我的代码。

<Tabs styles={{tabBarUnderlineStyle:'#0dc49d',tabBarActiveTextColor:'#0dc49d',tabBarInactiveTextColor:'#D3D3D3'}} >

   <Tab  heading="Most Popular">
     <Articles />
   </Tab>
   <Tab heading="New">
     <ArticlesNew />
   </Tab>
 </Tabs>

它显示默认的蓝色,而我需要更改下划线颜色,活动文本颜色更改为绿色,非活动文本颜色更改为灰色。

1 个答案:

答案 0 :(得分:2)

我试过你的代码,并得到了这个解决方案, 首先,如果要更改下划线样式,请更改Tabs的属性:

<Tabs tabBarUnderlineStyle={{ backgroundColor:'#0dc49d' }} >

然后使用以下代码更改选项卡的样式属性:

<Tab  heading="Most Popular" activeTextStyle={{ color:'#0dc49d' }} textStyle={{ color:'grey' }} >

并且您的完整代码应该是这样的:

<Tabs tabBarUnderlineStyle={{ backgroundColor:'#0dc49d' }} >

   <Tab  heading="Most Popular" activeTextStyle={{ color:'#0dc49d' }} textStyle={{ color:'grey' }} >
     <Articles />
   </Tab>
   <Tab heading="New" activeTextStyle={{ color:'#0dc49d' }} textStyle={{ color:'grey' }} >
     <ArticlesNew />
   </Tab>
 </Tabs>

希望可以帮助您解决问题,如果您有错误请注意我,谢谢:)