TabBar的渐变背景？答案

【问题标题】：Gradient Background for TabBar?TabBar的渐变背景？
【发布时间】：2017-08-14 16:41:37
【问题描述】：

我正在尝试将 TabNavigator 的背景设为渐变。 https://facebook.github.io/react-native/docs/colors.html 的文档表明颜色属性通常与 CSS 在 Web 上的工作方式相匹配。我去https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient看了看，因为s属于数据类型，所以只能用在可以用s的地方。因此，linear-gradient() 不适用于背景颜色和其他使用该数据类型的属性。

因此，以下将不起作用：

import { TabNavigator, TabBarBottom } from 'react-navigation';

export default TabNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
  . . .
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ....
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    animationEnabled: false,
    swipeEnabled: false,
    tabBarOptions: {
      activeTintColor: 'rgb(111, 111, 111)',
      labelStyle: {
        fontSize: 12,
      },
      style: {
        backgroundColor: 'linear-gradient(45deg, blue, red)',
      },
    }
  }
);

这从文档中很清楚。 不清楚什么会起作用。

更新：

显然，通常接受的做法是创建自己的标签栏。或者，就我而言，告诉设计师他运气不好。

【问题讨论】：

标签： reactjs react-native react-navigation

【解决方案1】：

您可以将tabBarComponent 替换为您自己的组件，然后使用react-native-linear-gradient。

【讨论】：

需要设置backgroundColor: 'transparent'，如下tabBarOptions: { style: { backgroundColor: 'transparent', } }

【解决方案2】：

你可以用这个

<Tab.Navigator 
  screenOptions={{
    headerShown: false,
    tabBarActiveTintColor: '#fff',
    tabBarStyle:{position:'absolute', height:55} ,
    tabBarBackground:() =>(
      <LinearGradient  colors={['#AD3231',  '#2757C3']} style={{height:70,borderTopLeftRadius:15,borderTopRightRadius:15}}/>
    )
  }}>
</Tab.Navigator>

【讨论】：