react导航5:如何在使用自定义标头组件时删除底部边界

Question

我在应用程序中使用的是react navigation v5。我想使用自定义标头组件。但无论我做什么，我都无法摆脱ios和android的底线。我研究过类似的stackoverflow问题。当使用自定义标头组件而不是内置标头组件时，所提出的解决方案似乎不起作用。

以下是我如何设置导航组件：

const MainStack = createStackNavigator();
export const MainNavigator = () => (
<MainStack.Navigator
screenOptions={{
headerStyle: {
elevation: 0,
shadowOpacity: 0,  
backgroundColor: "transparent",
},
header: CustomHeader,
}}
>
<MainStack.Screen name="home-screen" component={HomeScreen} />
</MainStack.Navigator>
)

这是我的CustomHeader组件：

export const CustomHeader = () => (
<View style={styles.header})>
<Text>My App</Text>
</View>
);
const styles = StyleSheet.create({
header: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
}
})

我看了无数的stackerflow问题，大多数人建议应用我刚才做的样式：仰角=0(android(，阴影不透明度：0(ios(，但没有结果。当使用自定义标头时，这种技术似乎不起作用。

如有任何帮助，将不胜感激

Answer 1

您可以在导航堆栈的头样式中添加shadowColor: 'transparent'

Answer 2

您可以通过在主导航器中的navigationOptions道具中向标头添加null值来解决此问题，如

header:null

然后调用每个屏幕中的头组件。