React Native Elements Tabs组件修改标签下方紫色下划线样式咨询

解决方案 #

要修改React Native Elements Tabs组件选中标签下方的下划线样式，只需给Tab组件新增indicatorStyle属性自定义即可，该属性直接控制选中状态下的下划线样式，可调整颜色、高度、圆角等所有支持的View样式参数。

修改后的代码示例：

<Tab 
  value={tabIndex} 
  onChange={setTabIndex}
  // 下划线自定义样式
  indicatorStyle={{
    backgroundColor: '#你需要的颜色值', // 替换原有紫色，例如 '#ff0000' 就是红色
    height: 2, // 调整下划线粗细
    borderRadius: 1, // 可选，给下划线加圆角
    // 还可添加marginHorizontal、width等属性调整下划线宽度、位置
  }}
>
  <Tab.Item
    title="PORTFÖY"
  />
  <Tab.Item
    title="GAYRİMENKUL"
  />
</Tab>
<TabView value={tabIndex} onChange={setTabIndex}>
  <TabView.Item style={{width: '100%'}}>
    {isLoadingPortfoy ? (
      <ActivityIndicator size="large" color="#0f0" />
    ) : (
      portfoy()
    )}
  </TabView.Item>
  <TabView.Item style={{width: '100%'}}>
    {isLoadingMulk ? (
      <ActivityIndicator size="large" color="#0f0" />
    ) : (
      mulk()
    )}
  </TabView.Item>
</TabView>

补充说明 #

如果需要同时调整标签文字样式，可给Tab.Item添加titleStyle（未选中文字样式）、selectedTitleStyle（选中文字样式）属性自定义。

内容的提问来源于stack exchange，提问作者yasin demir