TabBar 的渐变背景？

Question

我正在尝试将 TabNavigator 的背景设为渐变。 https://facebook.github.io/react-native/docs/colors.html indicates that color properties usually match how CSS works on the web. I went to 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)',
      },
    }
  }
);

从文档中可以清楚地看出这一点。 不清楚的是可行的。

更新：

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

Answer 1

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

Answer 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>

TabBar 的渐变背景？

Gradient Background for TabBar?

reactjs

react-native

react-navigation