如何在抽屉导航器中的屏幕反应导航中设置自定义边框半径和 zIndex？

Posted 2023-02-19

【中文标题】如何在抽屉导航器中的屏幕反应导航中设置自定义边框半径和 zIndex？

【英文标题】：How to set custom border radius and zIndex in react-navigation for screen in a drawer navigator?

【发布时间】：2021-11-11 15:07:27

【问题描述】：

我正在使用 react-navigation v 6.1 进行抽屉导航，我正在尝试实现以下功能：

目前这是我能够实现的目标：

如何为用户导航的堆栈或路由设置边框半径？

我尝试在screenOptions 上为<Drawer.Navigator> 设置sceneContainerStyle 边界半径，但似乎场景视图中实际上还有另一个子视图。

【参考方案1】：

经过大量试验后，我发现了一个 hack，因为我使用的是嵌套导航器，它似乎有一个包含当前屏幕视图的子视图，首先我设置了主题：

import  NavigationContainer, DefaultTheme  from '@react-navigation/native';
import AppGlobalNavigator from './navigation'

const navigatorTheme = 
  ...DefaultTheme,
  colors: 
    ...DefaultTheme.colors,
    background: 'rgba(0, 0, 0, 0)',
  ,
;


const App = () => )
 <NavigationContainer theme=navigatorTheme>
    <AppGlobalNavigator/>
 </NavigationContainer
)

然后我得到了一个透明的屏幕视图，我用视图包裹了每个组件，其中 backgroundColor 设置为白色，设置为borderRadius，然后将它们传递给导航器屏幕<Stack.Screen>。

结果：