时间戳

首页 > 解决方案 > React导航5特定屏幕中的透明标题

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

问题描述

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

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 Navigation 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)

标签： javascriptreactjsreact-nativereact-navigation

解决方案

文档有这个例子

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 所以在 backgroundColor 中传递了一些不透明度，如此处所述

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

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 组件，这样我就可以完全控制一切

推荐阅读