如何在 React Native Header Bar 中设置 borderRadius（圆角）？

Question

我正在使用 Native Stack Navigator v6 并尝试添加 borderBottomRightRadius 和 borderBottomLeftRadius，如下所示。它在 Expo Web 中有效，但在 iOS 或 Android 中无效，如下面的屏幕截图所示。

我很感激关于如何解决这个问题的指导，或者如果这不是正确的方法，请建议另一种方法来实现 header 栏的底部圆角。

      <HomeStack.Screen 
        name="HomeScreen" 
        component={HomeScreen} 
        options= {{
          headerTitle: "Home Screen",
          headerStyle: {
            backgroundColor: '#21ABA5',
            borderBottomRightRadius: 20,
            borderBottomLeftRadius: 20,
            overflow: 'hidden',
            background: 'transparent'
          },
          headerTitleStyle: {
            color: '#fff'
          },
          headerTintColor: 'white',
          headerTransparent: true
        }}
      />

Answer 1

让我编辑我的答案。如果您根本不需要网络，您可以创建自己的 header。如果要应用于所有屏幕，请将其添加到 Stack.Navigator 的 ScreenOptions。

import { getHeaderTitle } from "@react-navigation/elements";

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          header: ({ navigation, route, options, back }) => {
            const title = getHeaderTitle(options, route.name);

            return (
              <MyHeader
                title={title}
                leftButton={
                  back ? (
                    <MyBackButton onPress={navigation.goBack} />
                  ) : undefined
                }
                style={options.headerStyle}
              />
            );
          },
        }}
      />
    </Stack.Navigator>
  );
}

Answer 2

进一步研究证明这是不可能的。

Native Stack Navigator 依赖于显然不支持 borderRadius out-of-the-box 的原生平台选项。唯一可以通过 headerStyle 影响的选项是 backgroundColor.

其他选项包括使用 Stack Navigator 而不是 Native Stack Navigator，或构建完全自定义的 header 组件。然而，后者失去了 Native Stack Navigator 的大部分 built-in 优势。因此，我将切换到更可自定义的 JS-based Stack Navigator。