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

【问题标题】：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 的。

标签： react-native header react-navigation

【解决方案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,
      },
    .
    .
    .
    ));

【讨论】：