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

导航标头未隐藏在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,
          },
        .
        .
        .
        ));