react-navigation - 如何在反应导航底部标签中添加外框阴影？

Question

我想在 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

标签： react-navigationreact-navigation-bottom-tabreact-navigation-v6