react-native – 更改所选标签栏项目的底部边框颜色

发布时间：2020-12-15 20:18:13 所属栏目：百科来源：网络整理

导读：我在react-native中有以下代码 import React,{Component} from 'react';import {TabNavigator} from 'react-navigation';import {View} from 'react-native';class Home extends Component { static navigationOptions = { title:'Home',tabBarLabel:'First'

我在react-native中有以下代码

import React,{Component} from 'react';
import {TabNavigator} from 'react-navigation';
import {View} from 'react-native';

class Home extends Component {

  static navigationOptions = {
        title:'Home',tabBarLabel:'First'
  };

  render() {
    return <View></View>;
  }

}

const tabOptions = {

    tabBarOptions: {
        activeTintColor:'white',inactiveTintColor:'#D3D3D3',style:{
            backgroundColor:'green',borderTopWidth:1,borderTopColor:'#D3D3D3'
        },tabBarSelectedItemStyle: {
            borderBottomWidth: 2,borderBottomColor: 'red',},}

const ProductNavigator = TabNavigator({
  First: {screen: Home},Second:{screen: Home}
},tabOptions
);
export default ProductNavigator;

这是在Android模拟器中呈现时的样子

enter image description here

我希望黄色下划线是RED下划线.但我声明红色下划线的tabBarSelectedItemStyle规则未被确认.如何使所选标签栏项的下划线变为红色？

解决方法

要设置TabNavigator选定项目的指示器样式,您可以使用 indicatorStyle.

indicatorStyle – Style object for the tab indicator (line at the bottom of the tab).

例

const tabOptions = {    
    tabBarOptions: {
        activeTintColor:'white',indicatorStyle: {
            backgroundColor: 'red',tabOptions);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!