Отключить ящик бокового меню в реагировать родной - PullRequest
Новая
       5

Отключить ящик бокового меню в реагировать родной

0 голосов
/ 24 октября 2018

Я создал страницу с sidemenu, используя реактив-родной, и использовал реакцию-навигацию для маршрутизации.Я хочу отключить экран бокового меню, который появляется при помощи левого бокового жеста. 

  export const StackNav = StackNavigator(
    {
      Login: {
        screen: Login,
        navigationOptions: {
          headerMode: "none",
          header: null
        }
      },
      Signup: {
        screen: Signup,
        navigationOptions: {
          headerMode: "none",
          header: null
        }
      },
    },
    {
      initialRouteName: "Login"
    }
  );

  //for admin login, run campaign
  const TabNav1 = TabNavigator(
    {
      SelectCarriers: {
        screen: SelectCarriers,
        navigationOptions: {
          tabBarLabel: "Select Carriers"
        }
      },
      ErrorRecords: {
        screen: ErrorRecords,
        navigationOptions: {
          tabBarLabel: "Error Records"
        }
      }
    },
    {
      tabBarPosition: "top",
      tabBarOptions: {
        labelStyle: {
          fontWeight: "bold"
        }
      }
    }
  );
  //for Notification page or carrier login
  const TabNav = TabNavigator(
    {
      Notification: {
        screen: Notification,
        navigationOptions: {
          tabBarLabel: "Notification"
        }
      },
      NotificationHistory: {
        screen: NotificationHistory,
        navigationOptions: {
          tabBarLabel: "Notification History"
        }
      }
    },
    {
      tabBarPosition: "bottom"
    }
  );
  const TabNavStack = StackNavigator({
    Main: {
      screen: TabNav,
      navigationOptions: ({ navigation }) => ({
        headerTitle: "Notification"
      })
    }
  });

  const sidemenuNav = StackNavigator({
    Dashboard: {
      screen: Dashboard,
      navigationOptions: ({ navigation }) => ({
        headerLeft: (
          <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
            <Text style={{ paddingLeft: 15 }}>
              <Icon name="navicon" style={{ fontSize: 25 }} />
            </Text>
          </TouchableOpacity>
        )
      })
    },
    ViewRanking: {
      screen: ViewRanking,
      navigationOptions: ({ navigation }) => ({
        title: "View Ranking"
      })
    },
    SelectCarriers: {
      screen: SelectCarriers,
      navigationOptions: ({ navigation }) => ({
        headerTitle: "SELECT CARRIER"
      })
    },
    RunCampaign : {
      screen: RunCampaign,
      navigationOptions: ({navigation}) =>({
        title: "RUN"
      })
    },
    SelectedCampaign : {
      screen: SelectedCampaign,
      navigationOptions: ({navigation}) => ({
        title: "SELECTED CAMPAIGN",
      })
    },
    ChangePassword: {
      screen: ChangePassword,
      navigationOptions: {
        title: 'Change Password'
      }
    },
    EmailAnalytics: {
      screen: EmailAnalytics,
      navigationOptions: {
        title: 'Email Analytics'
      }
    },
    ViewCampaignHistory: {
      screen: ViewCampaignHistory,
      navigationOptions: {
        title: 'View Campaign History'
      }
    },
    CheckResponse: {
      screen: CheckResponse,
      navigationOptions: {
        title: 'CHECK RESPONSE'
      }
    },
    CampaignResult: {
      screen: CampaignResult,
      navigationOptions: {
        title: 'CAMPAIGN RESULT'
      }
    },
  });

  const DrawerNav = DrawerNavigator(
    {
      Item1: {
        screen: sidemenuNav
      }
    },
    {
      contentComponent: SideMenu,
      drawerWidth: Dimensions.get("window").width - 120
    }
  );

  export const PrimaryNav = StackNavigator(
    {
      StackNav: { screen: StackNav },
      TabNavStack: { screen: TabNavStack },
      DrawerNav: { screen: DrawerNav }
    },
    {
      // Default config for all screens
      headerMode: "none",
      initialRouteName: "StackNav"
    }
  );

Итак, здесь, в sidemenuNav, я хочу отключить боковой ящик для ViewRanking, SelectCarriers ....

Я пробовал drawerLockMode с опциями навигации, но не работал.

Я указал некоторые проблемы, но они бесполезны.

После предложения ответа отметьте его как дубликат или проголосуйте

1 Ответ

0 голосов
/ 24 октября 2018

drawerLockMode - это опция, которую вы находите. Документ (Без выдвижного ящика)

Указывает режим блокировки выдвижного ящика.Это также может динамически обновляться с помощью screenProps.drawerLockMode на вашем маршрутизаторе верхнего уровня.

И есть три варианта выбора. Документ

  • разблокирован (по умолчанию), что означает, что ящик будет реагировать (открывать / закрывать) на сенсорные жесты.
  • заблокирован-закрыт, означая, что ящикостанется закрытым и не будет реагировать на жесты.
  • заблокирован-открыт, то есть ящик останется открытым и не будет реагировать на жесты.Ящик может все еще открываться и закрываться программно (openDrawer / closeDrawer).

Таким образом, добавьте условный оператор в navigationOptions вашего sidemenuNav. Док 

sidemenuNav.navigationOptions = ({ navigation }) => {
  let drawerLockMode = 'unlocked';
  if (navigation.state.index > 0) { // control by depth
    drawerLockMode = 'locked-closed';
  }

  return {
    drawerLockMode,
  };
};

А это мой проверенный код. 

const AuthStackNavigation = createStackNavigator({
  HomeStack: HomeScreen,
  LoginStack: HomeScreen,
  RegisterStack: HomeScreen,
}, {
  initialRouteName: 'HomeStack',
  navigationOptions: {
    gesturesEnabled: false,
  },
})

AuthStackNavigation.navigationOptions = ({ navigation }) => {
  let drawerLockMode = 'unlocked';
  if (navigation.state.key > 0) {
    drawerLockMode = 'locked-closed';
  }

  return {
    drawerLockMode,
  };
};

const DashboardStack = createStackNavigator({
  Dashboard: {
    screen: Dashboard,
  }
})

const DrawerNav = createDrawerNavigator({
  AuthStackNavigation: {
    screen: AuthStackNavigation,
    // navigationOptions: {
    //   gesturesEnabled: false,
    //   drawerLockMode: 'locked-close'
    // }
  },
  DashboardStack: {
    screen: DashboardStack,
  },
  ThirdScreen: Dashboard,
})

...

const MainNavigation = createSwitchNavigator({
  HomeDrawer: DrawerNav,
	Tab: TabNavigationComponent,
  AuthStack: AuthStackNavigation, // You will use this.props.navigation.replace('HomeDrawer') after login process.
})

export default MainNavigation // Stack, Drawer, Switch naviagtions return react component.

Добавлено

Я полностью протестировал ваш архитектор экрана и проверил, что он работает хорошо.

/**
 * Disable the side menu drawer in react native
 * Test code: /12636331/otklychit-yaschik-bokovogo-meny-v-reagirovat-rodnoicomment92875031_52970168
 *
 */

import {
  createStackNavigator,
	createDrawerNavigator,
	createBottomTabNavigator,
} from 'react-navigation';

import { Platform, TouchableOpacity, Text } from 'react-native';
import React from 'react';


import HomeScreen from './Home';
import Dashboard from './Dashboard';
import CheckBoxScreen from './CheckBoxTest';

import TabBar from './TabBar';
// import createBottomTabNavigator from 'react-navigation-tabs/dist/utils/createBottomTabNavigator';

export const StackNav = createStackNavigator(
	{
		Login: {
			screen: HomeScreen,
			navigationOptions: {
				headerMode: "none",
				header: null
			}
		},
		Signup: {
			screen: HomeScreen,
			navigationOptions: {
				headerMode: "none",
				header: null
			}
		},
	},
	{
		initialRouteName: "Login"
	}
);

//for admin login, run campaign
const TabNav1 = createBottomTabNavigator(
	{
		SelectCarriers: {
			screen: HomeScreen,
			navigationOptions: {
				tabBarLabel: "Select Carriers"
			}
		},
		ErrorRecords: {
			screen: HomeScreen,
			navigationOptions: {
				tabBarLabel: "Error Records"
			}
		}
	},
	{
		tabBarPosition: "top",
		tabBarOptions: {
			labelStyle: {
				fontWeight: "bold"
			}
		}
	}
);
//for Notification page or carrier login
const TabNav = createBottomTabNavigator(
	{
		Notification: {
			screen: Dashboard,
			navigationOptions: {
				tabBarLabel: "Notification"
			}
		},
		NotificationHistory: {
			screen: Dashboard,
			navigationOptions: {
				tabBarLabel: "Notification History"
			}
		}
	},
	{
		tabBarPosition: "bottom"
	}
);
const TabNavStack = createStackNavigator({
	Main: {
		screen: TabNav,
		navigationOptions: ({ navigation }) => ({
			headerTitle: "Notification"
		})
	}
});

const sidemenuNav = createStackNavigator({
	Dashboard: {
		screen: HomeScreen,
		navigationOptions: ({ navigation }) => ({
			headerLeft: (
				<TouchableOpacity onPress={() => navigation.toggleDrawer()}>
					<Text style={{ paddingLeft: 15 }}>
						{/* <Icon name="navicon" style={{ fontSize: 25 }} /> */}
						icon
					</Text>
				</TouchableOpacity>
			)
		})
	},
	LoginStack: {
		screen: Dashboard,
		navigationOptions: ({ navigation }) => ({
			title: "View Ranking"
		})
	},
	SelectCarriers: {
		screen: Dashboard,
		navigationOptions: ({ navigation }) => ({
			headerTitle: "SELECT CARRIER"
		})
	},
	RunCampaign : {
		screen: Dashboard,
		navigationOptions: ({navigation}) =>({
			title: "RUN"
		})
	},
	SelectedCampaign : {
		screen: Dashboard,
		navigationOptions: ({navigation}) => ({
			title: "SELECTED CAMPAIGN",
		})
	},
	ChangePassword: {
		screen: Dashboard,
		navigationOptions: {
			title: 'Change Password'
		}
	},
	EmailAnalytics: {
		screen: Dashboard,
		navigationOptions: {
			title: 'Email Analytics'
		}
	},
	ViewCampaignHistory: {
		screen: Dashboard,
		navigationOptions: {
			title: 'View Campaign History'
		}
	},
	CheckResponse: {
		screen: Dashboard,
		navigationOptions: {
			title: 'CHECK RESPONSE'
		}
	},
	CampaignResult: {
		screen: Dashboard,
		navigationOptions: {
			title: 'CAMPAIGN RESULT'
		}
	},
}, {
	navigationOptions: {
    gesturesEnabled: false,
    // drawerLockMode: 'locked-closed' // not work
  },
});

sidemenuNav.navigationOptions = ({ navigation }) => {
  let drawerLockMode = 'unlocked';
  if (navigation.state.index > 0) { // control by depth
    drawerLockMode = 'locked-closed';
  }

  return {
    drawerLockMode,
  };
};


const DrawerNav = createDrawerNavigator(
	{
		Item1: {
			screen: sidemenuNav
		}
	},
	{
		// contentComponent: SideMenu,
		// drawerWidth: Dimensions.get("window").width - 120
	}
);

export const PrimaryNav = createStackNavigator(
	{
		StackNav: { screen: StackNav },
		TabNavStack: { screen: TabNavStack },
		DrawerNav: { screen: DrawerNav }
	},
	{
		// Default config for all screens
		headerMode: "none",
		initialRouteName: "DrawerNav"
	}
);

export default PrimaryNav // Stack, Drawer, Switch naviagtions return react component.

Я не уверен, что не так в вашем коде, но используйте недавнюю реагирующую навигацию с рекомендованными методами как createSomeNavigator вместо устаревших как DrawerNavigator, StackNavigator искоро.Удачи.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...