本机反应-将渐变应用到导航选项卡Navigator

Question

我正在使用React导航，并尝试应用从白色到透明的线性渐变到标签导航器，并使它坐在屏幕的底部。

我在这里找到了一个很好的解决方案，可以使用react-native-linear-gradient和导航标题:React navigation-gradient color for header

我不清楚的是如何将同样的逻辑应用到选项卡上。我尝试像链接的示例那样定义一个组件，然后将其传递给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
},

Answer 1

决定采用一种似乎很好用的方法:

>

创建渐变png图像，保存为项目中的资产

将png作为元素加载到主视图容器的底部

将png样式设置为绝对样式，以便在背景容器视图上呈现

这将在渐变图像上加载一个透明的标签条。不是最优雅的解决方案，但希望它能帮助那些陷入同样问题的人。