使用Native Base设置Tabs背景色无效，如何修改Tabs背景色？

直接给<Tabs>组件添加style属性无效，是因为Native Base的Tabs组件的导航栏（TabBar）是独立的子组件，背景色需要设置到TabBar本身（或者你自定义的ScrollableTab）上，而不是外层的Tabs容器。

针对你的代码（使用了自定义ScrollableTab作为TabBar），有两种可行的修改方式：

方法1：给ScrollableTab添加style属性 #

把背景色样式直接应用到你自定义的ScrollableTab组件上：

<Tabs renderTabBar={() => <ScrollableTab style={{ backgroundColor: "red" }}>}>
  <Tab heading="Tab1">
    <Tab1 />
  </Tab>
  <Tab heading="Tab2">
    <Tab2 />
  </Tab>
  <Tab heading="Tab3">
    <Tab3 />
  </Tab>
  <Tab heading="Tab4">
    <Tab4 />
  </Tab>
  <Tab heading="Tab5">
    <Tab5 />
  </Tab>
</Tabs>

方法2：使用ScrollableTab的tabStyle属性（兼容更多场景） #

如果方法1不生效，或者需要给单个Tab项也统一背景色，可以同时设置style和tabStyle属性：

<Tabs renderTabBar={() => (
  <ScrollableTab 
    style={{ backgroundColor: "red" }}
    tabStyle={{ backgroundColor: "red" }}
  />
)}>
  {/* 你的Tab内容 */}
</Tabs>

额外说明（针对默认TabBar的情况） #

如果你没有自定义TabBar，而是用Native Base的默认TabBar，可以直接使用Tabs组件的tabBarStyle属性：

<Tabs tabBarStyle={{ backgroundColor: "red" }}>
  {/* 你的Tab内容 */}
</Tabs>

核心原因是：外层的<Tabs>组件只是一个布局容器，实际显示顶部导航栏的是内部的TabBar组件（你这里替换成了ScrollableTab），所以样式必须作用到这个导航栏组件上才能生效。

内容的提问来源于stack exchange，提问作者Amir Hossein