如何使用LinearGradient用于React选项卡导航器选项卡

Question

我有一个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',

      }
    }

  }
);

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

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

Answer 1

您应该使用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>
        );


}

您可以使用this作为参考