如何在@react-navigation/bottom-tabs 中添加阴影？

Posted 2023-02-21

【中文标题】如何在@react-navigation/bottom-tabs 中添加阴影？

【英文标题】：How to add shadow in @react-navigation/bottom-tabs?

【发布时间】：2021-11-19 14:28:18

【问题描述】：

我正在尝试在 react-native 底部选项卡上应用阴影，但我无法做到这一点， 我们如何在 react native 底部标签上添加阴影？

我的标签栏样式。

   tabBarOptions=  
      style: 
        // flex:1,
        position: 'absolute',
        backgroundColor:
        themeColorcontext.themeColor == 'light' ? '#fff' : '#222',
        borderTopLeftRadius: vpWidth*0.085,
        borderTopRightRadius: vpWidth*0.085,
        height: vpHeight*0.15,
        shadowColor: themeColorcontext.themeColor == 'light' ? 'rgba(0,0,0,0.5)' : 'rgba(255,255,255,0.5)',
        shadowOffset:  width: 0, height: 6 ,
        shadowOpacity: 1,
        shadowRadius: 6,  
        elevation: 10,
        // flexWrap:'wrap', 
        borderTopColor:themeColorcontext.themeColor == 'light' ? '#fff' : '#222',
        borderTopWidth:1,
        borderWidth:1,
        borderColor:themeColorcontext.themeColor == 'light' ? '#fff' : '#222',
        // width:20
      ,
    

【问题讨论】：

请将您的react-navigation 版本添加到问题中。

反应导航v5

【参考方案1】：

您可以尝试设置 screenOptions 属性的“tabBarBackground”属性。 tabBarBackground 接受一个返回 Node 的函数，因此您可以传入具有应用样式的自定义元素。示例：

<AppTab.Navigator screenOptions= 
    headerShown: false,
    tabBarBackground: () => 
       /* You can customize and play around with the shadows */ 
      (<View style=
        shadowOffset:  width: 1, height: 1, 
        shadowColor: 'gray', 
        shadowRadius: 1 
      />) 
>
  <AppTab.Screen name="Screen1" component=MyScreen/>
</AppTab.Navigator>