导航标题没有隐藏在本机中

Question

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

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,
  },
.
.
.
));

但是，Header仍在为所有屏幕显示。

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

class login extends Component<Props> {

  static navigationOptions = {
    header: null
  };

有什么建议？

Answer 1

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

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

更新1

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

    }
  },
  login: {
    screen: login,
  },
.
.
.
));

Answer 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,
       });

Answer 3

最后，在somany论坛阅读和一些练习之后，找到最佳解决方案来限制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,
      },
    .
    .
    .
    ));