使用 headerMode 浮动在特定屏幕中隐藏自定义标题答案

【问题标题】：Hide Custom Header in specific screen with headerMode float使用 headerMode 浮动在特定屏幕中隐藏自定义标题
【发布时间】：2020-09-20 07:39:48
【问题描述】：

我的应用中有 3 个屏幕：“主页、联系人、个人资料”。我创建了一个自定义标题以显示在主页和联系人中，但不在个人资料屏幕中。问题是：我的自定义标题没有隐藏在配置文件屏幕中。如果我删除我的自定义标头以使用默认标头，它会隐藏，但是当我回到我的自定义标头时，这不会发生。

App.js

       <NavigationContainer ref={navigationRef}>
            <Stack.Navigator
            headerMode="float"
            initialRouteName="Home"
            screenOptions={{ 
                header: props => <CustomHeader {...props} />
            }}>

                <Stack.Screen
                name="Home"
                component={Home}
                options={{
                    cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS    
                }}/>

                <Stack.Screen name="Contacts" component={Contacts}
                options={{
                    cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS    
                }}/>

                <Stack.Screen
                name="Profile"
                component={Profile}
                options={{
                    headerShown: false
                }} />  

            </Stack.Navigator>
        </NavigationContainer>

【问题讨论】：

标签： react-native react-navigation react-native-navigation react-navigation-stack react-navigation-v5

【解决方案1】：

您可以提供类似屏幕的标题。

<NavigationContainer ref={navigationRef}>
  <Stack.Navigator
    headerMode="float"
    initialRouteName="Home">
    <Stack.Screen
      name="Home"
      component={Home}
      options={{
        cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        header: (props) => <CustomHeader {...props} />
      }}
    />

    <Stack.Screen
      name="Contacts"
      component={Contacts}
      options={{
        cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        header: (props) => <CustomHeader {...props} />
      }}
    />

    <Stack.Screen
      name="Profile"
      component={Profile}
      options={{
        headerShown: false,
        header: null,
      }}
    />
  </Stack.Navigator>
</NavigationContainer>;

或者您可以为所有标题创建自定义函数

function getHeader(route, props) {
  const routeName = route.state
    ?
      route.state.routes[route.state.index].name
    : || 'Home';

  switch (routeName) {
    case 'Home':
    case 'Contacts':
      return <CustomHeader {...props} />
    case 'Profile':
      return null;
  }
}

and use it like


 <Stack.Screen
      name="Profile"
      component={Profile}
      options={({ route }) => ({
        header: (props)=> getHeader(route, props),
      })}
    />

来源：https://reactnavigation.org/docs/screen-options-resolution

【讨论】：

好的，谢谢！