导航标题未隐藏在本机反应中

Posted 2023-03-15

【中文标题】导航标题未隐藏在本机反应中

【英文标题】：Navigation Header not hiding in react native

【发布时间】：2019-04-25 06:11:21

【问题描述】：

我们在我们的 react native 应用程序中显示导航侧抽屉。 所以，在那，对于特定的屏幕，我们必须禁用手势。 对于完整的应用程序，我们也隐藏了导航标题。

MyStack.navigationOptions = ( navigation ) => 
  let drawerLockMode = 'unlocked';
  if ((navigation.state.index === 2) || (navigation.state.index === 3)) 
    drawerLockMode = 'locked-closed';
  
  return 
    drawerLockMode,
    header: null,
    headerVisible: false,
  ;
;


const MyStack = createStackNavigator(
  screen1:  screen: screen1, navigationOptions:  header: null, headerMode: 'none'  ,
  screen2:  screen: screen2, navigationOptions:  header: null, headerMode: 'none' ,
      screen3:  screen: screen3, navigationOptions:  header: null, headerMode: 'none' ,

.
.
);

const MyAppStack = createAppContainer(createDrawerNavigator(
  MyStack: 
    screen: MyStack,
  ,
  login: 
    screen: login,
  ,
.
.
.
));

但是，标题仍然显示在所有屏幕上。

即使我们已经尝试过隐藏单个屏幕导航标题，但是，仍然没有隐藏。

class login extends Component<Props> 

  static navigationOptions = 
    header: null
  ;

有什么建议吗？

【问题讨论】：

可以在创建的时候隐藏header吗？例如： const DrawerStack = createStackNavigator( ClassFilter: screen: ClassFilter , EventDetail: screen: EventDetail , headerMode: "none" );

@JebinBenny 不工作，仍然显示标题

尝试设置headerMode: 'none'

headerMode: 'none' 这个只有我设置了，但是还是不行

请更新您的代码并展示您是如何实现 headerMode none 的。

【参考方案1】：

要隐藏导航标题，请在 navigationOptions 之外添加 headerMode。两者应处于同一水平。

export default createStackNavigator(
  ...
, 
  headerMode: 'none',
  navigationOptions: 
    ...
   
);

更新 1

const MyAppStack = createAppContainer(createDrawerNavigator(
  MyStack: 
    screen: MyStack,
    navigationOptions: 
          header:false, // or drawerLabel: () => null  

    
  ,
  login: 
    screen: login,
  ,
.
.
.
));

【讨论】：

供参考：React Navigation

哦，是的，请查看this。您可能需要稍微改变结构

我们不能只设置 header:null 在 MyStack.navigationOptions = ( navigation ) => method?

在上面的代码中出现错误解析错误： headerMode: 'none', navigationOptions: ...

我已添加更新以回答，请在您的抽屉导航器中尝试添加navigationOption。试试header:false 或drawerLabel: () => null

【参考方案2】：

你好，Anil，请尝试以下代码

MyStack.navigationOptions = ( navigation ) => 
  let drawerLockMode = 'unlocked';
  if ((navigation.state.index === 2) || (navigation.state.index === 3)) 
    drawerLockMode = 'locked-closed';
  
  return 
    drawerLockMode,
    header: null,
    headerVisible: false,
  ;
;


const MyStack = createStackNavigator(
  screen1:  screen: screen1 ,
  screen2:  screen: screen2 ,
  .
  , 
       headerMode: 'none',
       navigationOptions: 
         headerVisible: false,
       );

【讨论】：

这部分出现语法错误 headerMode: 'none', navigationOptions: headerVisible: false, );你在哪里添加这些？

【参考方案3】：

最后，经过一些论坛阅读和一些实践，找到了在 React-Native Navigation 中限制特定屏幕的手势/滑动的最佳解决方案。希望这对将来的人有所帮助。

安装以下库

 import getCurrentRouteName from 'react-navigation-current-route';


    const MyStack = createStackNavigator(
      screen1:  screen: screen1, navigationOptions:  header: null, headerMode: 'none'  ,
      screen2:  screen: screen2, navigationOptions:  header: null, headerMode: 'none' ,
      screen3:  screen: screen3, navigationOptions:  header: null, headerMode: 'none' ,

    .
    .
    );

MyStack.navigationOptions = ( navigation ) => 
  const currentRoute = getCurrentRouteName(navigation.state);
  let drawerLockMode = 'unlocked';
  if ((currentRoute === 'screen1') || (currentRoute === 'screen2')) 
    drawerLockMode = 'locked-closed';
  
  return 
    drawerLockMode
  ;
;    

    const MyAppStack = createAppContainer(createDrawerNavigator(
      MyStack: 
        screen: MyStack,
      ,
      login: 
        screen: login,
      ,
    .
    .
    .
    ));