React Native - 将渐变应用于导航 TabNavigator答案

【问题标题】：React Native - Applying gradient to Navigation TabNavigatorReact Native - 将渐变应用于导航 TabNavigator
【发布时间】：2018-11-20 05:34:21
【问题描述】：

我正在使用 React Navigation 并尝试将一个从白色到透明的线性渐变应用到选项卡导航器，并让它位于屏幕底部。

我在这里找到了一个使用带有导航标题的 react-native-linear-gradient 的好解决方案：React Navigation - Gradient color for Header

我不清楚的是如何将相同的逻辑应用于 tabBar。我尝试在链接示例中定义一个组件，然后将其传递给 backgroundColor，但它引发了错误。

这是我当前的 tabBarOptions 代码：

{
tabBarOptions: {
  activeTintColor: 'rgba(248, 164, 2, 0.6)',  // Color of tab when pressed
  inactiveTintColor: 'rgba(0,0,0,0.5)', // Color of tab when not pressed
  showLabel: false,
  indicatorStyle: {
    backgroundColor: 'transparent'
  },
  style: {
    backgroundColor: 'rgba(255, 255, 255, 1.0)',
    borderTopColor: 'transparent',
    height: dynamicSize(60),
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0
  },
},

然后我通过将选项卡定义为：

tabs: {
  screen: TabVisibleNavigator
},

【问题讨论】：

标签： react-native gradient

【解决方案1】：

决定采用似乎可以正常工作的 hack：

在 tabBarOptions 样式中设置 backgroundColor 为透明；定位到绝对
创建渐变png图片，保存为项目中的资产
将 png 作为元素加载到主 View 容器的底部
将 png 样式设置为绝对样式，以便它呈现在背景容器视图上

这将在渐变图像上加载一个透明的标签栏。不是最优雅的解决方案，但希望它可以帮助遇到同样问题的人。

【讨论】：