时间戳

首页 > 解决方案 > 如何将 LinearGradient 用于反应选项卡导航器选项卡

android - 如何将 LinearGradient 用于反应选项卡导航器选项卡

问题描述

我有一个反应tabnavigator ，我从ReactNavigation(v2)组件中使用它：

const Tab = createMaterialTopTabNavigator({

  Nearest: {
    screen: Nearest, navigationOptions: {
      tabBarLabel: 'myprofile'
    }
  },

  Recomanded: {
    screen: Recomanded, navigationOptions: {
      tabBarLabel: 'recomanded'
    }
  },
  Home: {
    screen: Hotest, navigationOptions: {
      tabBarLabel: 'hotest'
    }
  },
},
  {
    tabBarOptions: {
      labelStyle: {
        fontSize: 12,
         fontFamily:"IRANSans"
      },
      tabStyle: {
        backgroundColor: '#ef6102',

      }
    }

  }
);

现在我想对标签颜色使用线性渐变，但我找不到任何方法！...这怎么可能？我如何获取此标签内的标签：

  <LinearGradient  colors={['#EF7D2F', '#C8191A']}>..here..</LinearGradient>

标签： androidiosreact-nativereact-navigation

解决方案

您应该使用以下方法为您的选项卡添加自定义视图tabBarCompontent：

const Tab = createMaterialTopTabNavigator({

  Nearest: {
    screen: Nearest, navigationOptions: {
      tabBarLabel: 'myprofile'
    }
  },

  Recomanded: {
    screen: Recomanded, navigationOptions: {
      tabBarLabel: 'recomanded'
    }
  },
  Home: {
    screen: Hotest, navigationOptions: {
      tabBarLabel: 'hotest'
    }
  },
},
  {
    tabBarComponent:(props)=>{
               return(<TabBar {...props}></TabBar>)},<<<<<<<look here<<<<<<<<

    tabBarOptions: {
      labelStyle: {
        fontSize: 12,
         fontFamily:"IRANSans"
      },
      tabStyle: {
        backgroundColor: '#ef6102',

      }
    }

  }
);

例如 TabBar 是一个像这样的组件：

const TabBar=(props)=> {
        return (
           <LinearGradient  colors={['#EF7D2F', '#C8191A']}>..here.. 
            </LinearGradient>
        );


}

您可以将此作为参考

推荐阅读