代码之家 › 专栏 › 技术社区 › Anilkumar iOS Developer

导航标头未隐藏在react native中

react-navigation header react-native

0

Anilkumar iOS Developer · 技术社区 · 6 年前

我们在react本机应用程序中显示导航侧抽屉。因此,对于特定的屏幕,我们必须禁用手势。

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
  };

有什么建议吗?

1 回复 | 直到 6 年前

1

2

Dhruv 6 年前

要隐藏导航标题,请添加 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,
  },
.
.
.
));

2

1

Hiren Vaghela 6 年前

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

3

0

Anilkumar iOS Developer 6 年前

最后,在somany论坛阅读和实践之后,找到了在React本地导航中限制特定屏幕的手势/滑动的最佳解决方案。希望这对将来有帮助。

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