如何为React Navigation底部标签栏添加外部盒子阴影

我希望在react-native-navigation中添加外部盒子阴影。
预期实现效果如下：

当前我应用样式后，外部盒子阴影没有发生变化，实际效果如下：

我的实现代码如下：

import React, { FunctionComponent } from 'react'
import NavigatorProps from './NavigatorBottomTabs.type'
import { Screen } from '../../Module/Navigation/Navigation.type'
import Route from '../../Module/Navigation/Navigation.route'
import { ANY } from '../../Type/Type'
import TabBar from './NavigatorBottomTabs.TabBar'

const RenderScreen = (Tab: ANY) => (screen: Screen) =>
    <Tab.Screen key={screen.name} {...screen} />

const NavigatorBottomTabs: FunctionComponent<NavigatorProps> = (props) => {
    const Tab = props.Tab
    return (
        <>
            <Tab.Navigator
                tabBar={TabBar}
                initialRouteName={Route.RootDabshboardProfileRouter}
                tabBarOptions={{
                    borderWidth: 1,
                    borderColor: 'red',
                    marginTop: 10,
                    style: {
                        borderTopWidth: 0,
                        elevation: 8,
                        backgroundColor: '#d9d9d9',
                        shadowColor: '#000000',
                        shadowOpacity: 0.8,
                        shadowRadius: 2,
                        shadowOffset: {
                            height: 1,
                            width: 1
                        }
                    }
                }}
                screenOptions={{
                    tabBarStyle: {
                        elevation: 8,
                        borderTopWidth: 0,
                        backgroundColor: '#d9d9d9',
                        shadowColor: '#000000',
                        shadowOpacity: 0.8,
                        shadowRadius: 2,
                        shadowOffset: {
                            height: 1,
                            width: 1
                        }
                    }
                }}
            >
                {props.screens.map(RenderScreen(Tab))}
            </Tab.Navigator>
        </>
    )
}

export default NavigatorBottomTabs

修复方案 #

按以下步骤调整即可解决阴影不生效问题：

1. 移除冲突配置：tabBarOptions是react-native-navigation旧版本的废弃属性，和screenOptions.tabBarStyle同时存在会造成样式覆盖，直接删掉整块tabBarOptions配置即可。
2. 预留阴影显示空间：阴影默认渲染在元素盒模型外侧，没有边距的话会被父容器裁切，在tabBarStyle中添加marginVertical: 8或者至少设置marginTop: 8，给顶部阴影留出显示位置。
3. 调整阴影参数适配双端：你当前的阴影参数太小显示不明显，安卓端把elevation调到12以上，iOS端把shadowRadius调到4、shadowOpacity调到0.3，shadowOffset.height改为-2（让阴影向上偏移显示在标签栏顶部）。
4. 自定义TabBar额外适配：如果你自定义的TabBar组件外层包裹了默认View，需要把阴影样式直接加在自定义TabBar的外层View上，优先级高于Navigator上的全局配置。

调整后的参考配置：

screenOptions={{
    tabBarStyle: {
        borderTopWidth: 0,
        backgroundColor: '#d9d9d9',
        marginVertical: 8,
        // 安卓端阴影
        elevation: 12,
        // iOS端阴影
        shadowColor: '#000000',
        shadowOpacity: 0.3,
        shadowRadius: 4,
        shadowOffset: {
            height: -2,
            width: 0
        }
    }
}}

内容的提问来源于stack exchange，提问作者twboc