Question

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

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

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

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

Answer 1

我试过你的代码，并得到了这个解决方案，首先，如果要更改下划线样式，请更改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>

希望可以帮助您解决问题，如果您有错误请注意我，谢谢：）

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

1 个答案: