Question

我正在尝试将TabNavigator的背景设为渐变。 https://facebook.github.io/react-native/docs/colors.html处的文档表明颜色属性通常与CSS在网络上的工作方式相匹配。我去了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。

TabBar的渐变背景？

1 个答案: