React 导航 5 上特定屏幕中的透明标题

Question

我正在将我的代码从 React Navigation 4 升级到 5。对于堆栈导航器，我之前有以下配置。

const whiteNavOptions = {
headerStyle: {
backgroundColor: "white"
}
}
const transNavOptions = {
headerTransparent: true,
headerTintColor: "white",
}
const VenuesNavigator = createStackNavigator(
{
Venuefy: VenuefyScreen,
VenueDetail: {
screen: VenueDetailScreen,
navigationOptions: transNavOptions,
},
Sorting: SortingScreen,
}, {
defaultNavigationOptions: whiteNavOptions
}
);

所以现在我正在尝试在 React 导航 5 中像这样映射它

const VenuesStackNavigator = createStackNavigator();
const VenuesNavigator = () => {
return <VenuesStackNavigator.Navigator screenOptions={whiteNavOptions}>
<VenuesStackNavigator.Screen name="Venuefy" component={VenuefyScreen} options={VenuesScreenOptions} />
<VenuesStackNavigator.Screen name="VenueDetail" component={VenueDetailScreen} options={VenueDetailScreenOptions}/>
<VenuesStackNavigator.Screen name="Sorting" component={SortingScreen} />
</VenuesStackNavigator.Navigator>
}

我已将默认screenOptions设置为whiteNavOptions.现在我想将transNavOptions设置为仅VenueDetailScreen。也许是这样的：

<VenuesStackNavigator.Screen name="VenueDetail" component={VenueDetailScreen} options={VenueDetailScreenOptions} screenOptions={transNavOptions}/>

从文档中不清楚，我该怎么做？我知道我一定错过了一些明显的东西，但任何指向那个显而易见的指针将不胜感激 x(

Answer 1

文档有这个例子

function StackScreen() {
return (
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{
title: 'My home',
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}
/>
</Stack.Navigator>
);
}

这意味着headerStyle基本上接受styleProps，所以在背景中颜色传递一些不透明度，如此处描述

或者我认为你应该能够做这样的事情

declare style obj
const transparentStyles = {
backgroundColor: 'white',
opacity: 0.5,
}

并将其传递给屏幕选项，例如

...
function StackScreen() {
return (
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{
title: 'My home',
headerStyle: transparentStyles,
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}
/>
</Stack.Navigator>
);
}

但是如果我是你，我会简单地创建自定义标头 JSX 组件，这样我就可以完全控制一切