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

【问题标题】：How to add shadow in @react-navigation/bottom-tabs?如何在@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

标签： android ios react-native react-navigation-v5 bottomtabs

【解决方案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>

【讨论】：